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HyperText Markup Language, or HTML, is the universal language of the World 
Wide Web. Every time you visit a website, the site’s web server sends HTML 
to your browser, which then renders it as the web page you see on your screen. 
Because this process is universal, anyone who works with web technologies— 
which these days means virtually all developers, designers, and even many 
managers—can benefit from knowing the basics of what HTML is and how 
it works. Learn Enough HTML to Be Dangerous is designed to give you this 
foundation in basic HTML. 

Appropriately enough, there are lots of HTML tutorials on the Web, but 
most of them use toy examples, focusing on HTML syntax in isolation, without 
showing how HTML is written and deployed in real life. In contrast, Learn 
Enough HTML to Be Dangerous not only shows you how to make real HTML 
pages, it shows you how to deploy an actual site to the live Web. If you have 
previously attempted or completed an HTML tutorial, it’s likely that Learn 
Enough HTML to Be Dangerous will help you “put everything together” in a 
way you haven’t seen before, including an emphasis on expanding your skillset 
with technical sophistication (Box 1). 


Box 1. Technical sophistication 


If tech is the new literacy, technical sophistication is like being able to read and 
write. This includes being able to figure things out on your own (like sounding out 
words while reading) and look things up when you need them (like consulting a 
dictionary or thesaurus while writing). 

On the Web, the alphabet is HTML. 

In Learn Enough HTML to Be Dangerous, we’\l constantly be on the lookout 
for chances to improve our technical sophistication. We’ll deploy our website 
immediately to production (Section 1.2), getting over any bumps along the way. 
We’ll push ourselves to read HTML we don’t quite understand, content to get the 
gist at first before deepening our mastery later. And we’ll put all our tools to use, 
combining the command line, text editor, and version control to learn how to make 
HTML websites the Right Way™—professional-grade from the start. 


Because of our pragmatic approach, the tools we’ll be using use are all 
professional-grade (Figure 1). They are the same tools covered in the Learn 
Enough Developer Fundamentals sequence, which you should follow now if 
you’re not already familiar with them. The individual tutorials are available for 
free on the Web: 


1. Learn Enough Command Line to Be Dangerous on the Unix command 
line 


2. Learn Enough Text Editor to Be Dangerous on text editors 


3. Learn Enough Git to Be Dangerous on version control with Git 


To get even more out of the sequence, you can join our subscription service, the 
Learn Enough Society, which includes streaming videos and special enhanced 
versions of the online tutorials, among other benefits. 
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2. ~/repos/sample_website (bash) 
[sample_website (gh-pages)]$ git status 
On branch gh-pages 
Your branch is up-to-date with 'origin/gh-pages'. 
Changes not staged for commit: 
(use "git add <file>..." to update what will be committed) 
(use "git checkout -- <file>..." to discard changes in working directory) 


<h1>The Learn 
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no changes added to commit (use "git add" and/or "git commit -a") 
Background [sample_website (gh-pages)]$ || 


Learn Enough to Be Dangerous is an outgrowth of the Ruby on Rails Tutoria 
Learn Enough HTML to Be Dangerous, which teaches the basics of HyperTq 
related tutorials can be found at learnenough.com. 


join our mov 
up for our o 
</p> 


Founders 


HTML was crei 
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Figure 1: The tools of the trade (kitten not included). 


If you’re just getting started with HTML, the Developer Fundamentals se- 
quence represents a little bit of overhead, but the benefits are enormous. To 
our knowledge, this combination of software development best practices and 
deploying to a live website is unique among introductory HTML tutorials, and 
gives you a tremendous advantage both when collaborating with others and 
when taking your skills to the next level by learning to build more complicated 
sites. 

Learn Enough HTML to Be Dangerous focuses on core HTML, starting 
with a “hello, world!” page that we’ll deploy to production (!) in Section 1. 
We’ll then fill in an index page with formatted text, links, and images in Sec- 
tion 2, expanding it into a multiple-page site with more advanced features like 
tables and lists in Section 3. Finally, we’ll add some inline styling in Section 4, 
which will allow us to see the effect of simple style rules on plain HTML ele- 
ments. 

The resulting site will be functional, but we’ll run into several important 
limitations imposed by working with raw HTML. This will set the stage for 
the next Learn Enough tutorial, Learn Enough CSS & Layout to Be Dangerous, 
which creates a fully modern website using Cascading Style Sheets (CSS) to 
separate the design of the site from its HTML structure, while covering site 
layouts and advanced styling as well. 


1 Basic HTML 


Underneath every website, no matter how simple or complex, you will find 
HTML. In this tutorial, by creating and deploying a simple but real website, 
we’ ll gain an understanding of the underlying structure that every site uses to 
organize and display content online. 

As a technology standard, HTML has been constantly evolving ever since 
its introduction in 1993 by Tim Berners-Lee, the original “web developer” (Fig- 
ure 2).! Nowadays, the specification of what's in HTML and what isn’t is man- 


Image retrieved from https://en.wikipedia.org/wiki/Tim_Berners-Lee#/media/File:Sir_Tim_Berners-Lee.jpg 
on 2016-01-12. Copyright © 2014 by Paul Clarke and used unaltered under the terms of the Creative Commons 
Attribution-ShareAlike 4.0 International license. 


aged by the World Wide Web Consortium (W3C). The latest public release, 
which is what we will be using in this tutorial, is HTMLS (that is, version 5 of 
HTML). The companies that create web browsers take the specs from the W3C 
and implement the behaviors that are expected when the browser comes across 
any of the allowed formatting, such as making text bold or changing its color 
(or even doing both at the same time). 


Figure 2: Sir Tim Berners-Lee, the original web developer. 


Fortunately, we won’t need to get into a lot of specifics or worry about what 
has changed from version to version. Just know that new features are being 
added regularly to expand browser functionality and modernize the technology. 
Common elements, including the ones we’ll be covering in this tutorial, haven’t 
changed much since the beginning, but that doesn’t mean that they will always 
be safe—the HTML spec is a constantly evolving creature being assembled 


by a committee (Figure 3).? We’ll discuss some practical effects of this in 
Section 1.1. 


A CAMEL IS HORSE DESIGNED BY COMMITTEE 


Figure 3: HTML in animal form. 


1.1 HTML tags 


As the name HyperText Markup Language indicates, HTML is a markup lan- 
guage, not a programming language. HTML allows a web author to organize 
and define how content should be displayed, which means it can do things like 


Original image retrieved from https://www.flickr.com/photos/ginsnob/2099458654 on 2016-01-07. Copy- 
right O 2007 by Chris Palmer and modified under the terms of the Creative Commons Attribution-ShareAlike 2.0 
Generic license. Modified image copyright O 2016 by Lee Donahoe and released under the Creative Commons 
Attribution-ShareAlike 2.0 Generic license. 


add text formatting; make headings, lists, and tables; and include images and 
links. You can think of an HTML file as an ordinary written document that 
has been carefully annotated by the author. Some of the notes might highlight 
parts of the text, some might include an image that has been paper-clipped to 
the document, and others might tell you where to find additional information. 

The “HyperText” part of the HTML acronym refers to the way links on the 
Web allow you to move from one document to another in a non-linear fashion. 
For example, if you are reading the Wikipedia article on HTML and see a 
highlighted link to a related topic like CSS, you can click on that link and be 
taken immediately to the other article. It also allows a document like this one to 
link to Wikipedia. (You might notice that external links in this document open 
in a new browser tab. We’ll learn how to do this ourselves in Section 3.3.) 

Technologically, hypertext is a great improvement over non-linked docu- 
ments, as it eliminates the need to flip or scroll through pages of content to find 
what you are looking for. These days, the ability to link between documents is 
something that we all take for granted, but when the HTML specification was 
created it was an innovation important enough to be included in the name of 
the technology. 

HTML source is plain text, which makes it ideal for editing with a text ed- 
itor (as discussed in Learn Enough Text Editor to Be Dangerous). Instead of 
using the convenient but inflexible What You See Is What You Get (WYSI- 
WYG) approach of word processors, HTML indicates formatting using special 
tags (Figure 4),* which are the text annotations alluded to above. 


Image retrieved from https://www.flickr.com/photos/jdhancock/38 14523970 on 2016-01-09. Copyright © 
2009 by JD Hancock and used unaltered under the terms of the Creative Commons Attribution 2.0 Generic license. 


Figure 4: HTML uses tags for everything. 


As we'll see, HTML supports more than one kind of tags, but the most 
common kind consist of strings (sequences of characters) enclosed in beginning 
and ending tags, like this: 


<strong>make them strong</strong> 


Figure 5 illustrates the detailed anatomy of this typical tag, including the name 
of the tag (st rong, in this case), angle brackets, and a forward slash (/). 
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make them strong 


Figure 5: The anatomy of a typical HTML tag. 


Although HTML tags are not visible to the end-user (1.e., the person view- 
ing your website), they do give the web browser suggestions about how to for- 
mat the content and how it should be displayed on the page. A simple example 
using the strong tag appears in Listing 1. 


Listing 1: A string with HTML tags in the text. 


I am a string about things. Some of those things are more important than others, 
and I want to draw attention to them, so I will <strong>make them 
strong</strong> so that they stand out among their less spectacular neighbors. 


Most browsers render the st rong tag as boldface text, so in a typical browser 
Listing 1 would appear something like this: 


Tam a string about things. Some of those things are more important 

than others, and I want to draw attention to them, so I will make 

them strong so that they stand out among their less spectacular 

neighbors. 
Note that, even though the contents of the st rong tag are broken across a line 
in Listing 1, the browser ignores this extra space, and formats the string as a 
continuous line of text. 
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By the way, HTML does support a b (bold) tag in addition to strong, but 
over the years HTML has moved away from tag names that specify formatting 
(1.e., “make the text bold”) and toward names that focus on meaning—or, in 
fancier terms, semantics—leading to an emphasis on so-called semantic tags 
(Box 2). For example, the semantic tag strong indicates that the enclosed text 
should be made to look “strong” somehow, letting the browser decide exactly 
how to do it. 


Box 2. The cautionary (semantic) tale of <b> and <i> 


When HTML was first created, the Internet made funny noises when you con- 
nected to it, and you paid for the connection in time or by amount of data sent. 
Those limitations meant that brevity was an important consideration when decid- 
ing on tags, and the whole endeavor was so new that there wasn’t as much thought 
about the meaning the tags conveyed. So short tags were popular, and getting 
everything to display correctly to people was the end-goal. 

As a result of this focus on concision, the original way to make text bold 
was to use the b tag (<b>. . .</b>), and to make text italic it was the i tag 
(<i>...</i>). This worked just fine (in fact, it still works even today), and no 
one was confused. 

What some developers began to notice was that HTML tags were being defined 
only by how the content inside should be displayed in a browser, rather than by 
the meaning of the content. That's fine for people looking at content with good 
ol” eyeballs, but not so good for automated systems that might be rapidly scanning 
web pages and need to infer what the content wrapped in different HTML tags 
actually means. 

To address this issue, a movement started that pushed for new tags based 
on semantic meaning instead of on appearance, thereby giving rise to the 
current preferred method for indicating bold or italicized text with strong 
(<strong>...</strong>) and em (<em>. ..</em>, for “emphasized”), 
respectively. The idea here is that the intent behind making text bold is to make 
it strongly stand out from the rest of the content, and the intent behind italicizing 
text is to show emphasis. 
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This might seem like a subtle difference, but semantic tags are used for a lot 
more than just defining strong or emphasized text. Semantic HTML tags will be 
further discussed in the Learn Enough CSS & Layout to Be Dangerous, where we 
will cover tag conventions and page layout in greater depth. 


At this point, we’ve covered the conceptual core of HTML: HTML consists 
of text content wrapped in tags, which organize or indicate a change in the 
display of that content. 

But the Devil, as they say, is in the details... and HTML has a whole lot of 
details. 


1.1.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people's answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 

Note: Unlike most other Learn Enough tutorials, the results of some exer- 
cises will appear in future screenshots. 


1. Identify all the tags in Listing 2. Notice that you don’t have to know what 
a tag does to be able to identify it correctly. (This is a good example of 
technical sophistication (Box 1).) 


2. Some HTML tags don’t contain any content, and instead are known as 
void elements, also called self-closing tags. Which tag in Listing 2 is a 
void element? 


3. HTML tags can be nested, which means that one tag can be put inside 
another. Which tags in Listing 2 are nested? Don’t include any self- 
closing tags. 
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Listing 2: Shall I compare thee to a summer’s day? 


<p> 
William Shakespeare's <em>Sonnets</em> consists of 154 poems, each fourteen 
lines long (three 
<a href="https://en.wikipedia.org/wiki/Quatrain">quatrains</a> 
followed by a rhyming 
<a href="https://en.wikipedia.org/wiki/Couplet">couplet</a>) . 
<strong>Sonnet 18</strong> is perhaps the most famous, and begins like this: 
</p> 
<blockquote> 
<p> 
Shall I compare thee to a summer's day?<br> 
Thou art more lovely and more temperate. <br> 
Rough winds do shake the darling buds of May, <br> 
And summer's lease hath all too short a date. 
</p> 
</blockquote> 


1.2 Starting the project 


Now that we know the basic structure of markup and tags, it’s time to get started 
with the project that will serve as our sample website for learning HTML. The 
sample project is a mock informational website, whose main page talks a little 
about this tutorial, the company behind it, and HTML itself. As we develop 
the home page and two ancillary pages, we’ll see how to use a wide variety of 
HTML tags, while also showing you how to make the kind of public-facing site 
that you could use for your own work or as a service to other people. Although 
some of the information on the site is about Learn Enough to Be Dangerous, 
ultimately it is about you. 

We’ll begin by following the same steps used in Learn Enough Git to Be 
Dangerous, so this section will also serve as a review of how to use Git. (If you 
don’t have Git proficiency at the level of Learn Enough Git to Be Dangerous, 
we recommend you read that tutorial at this time.) As in the Git tutorial, the 
result here will be that we can deploy our sample HTML site to the live Web 
using GitHub Pages (Box 3). 
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Box 3. GitHub Pages 


Once you have an account at GitHub (and have verified your emailed address), 
you can use a free feature called GitHub Pages that allows you to host simple 
HTML sites for free on GitHub’s infrastructure. 

This is a major advance compared to the bad old days of the early Web. For 
example, if this were 1999, you’d not only have to pay money for the hosting, but 
you'd also be on the hook for the cost of transferring the data to the people visiting 
your site. For sites with even moderate traffic, the bills could add up fast. 

Nowadays, we have many better options, GitHub Pages among them. Not 
only is GitHub Pages free, but it is incredibly easy to use. When you host a repo at 
GitHub, any valid HTML stored on the gh—pages branch of the repo is available 
online (nearly) instantly. All you need to do is commit your changes on the branch 
and push the commit to GitHub. GitHub Pages takes care of the rest. 


We’ll get started by making a directory and an initial repository for our 
sample website. First, open a terminal window and make a directory called 
sample_website:* 


$ mkdir -p repos/sample_website 


Next, cd into the directory and touch the file for the main page of the site, 
which should be called index.html: 


$ cd repos/sample_website 
$ touch index.html 


Then initialize the repository: 


4The command mkdir -p is covered in Learn Enough Git to Be Dangerous. Every command we use in Learn 
Enough HTML to Be Dangerous is covered somewhere in a previous Learn Enough tutorial (unless otherwise 
indicated), so we recommend you search through the previous tutorials if you run across any commands that don’t 
look familiar. 
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$ git init 
$ git add -A 
$ git commit -m "Initialize repository" 


The reason we created a file using touch is because Git won't initialize an 
empty repository.? The reason we've called it index.html is because that's 
the default filename for “home” pages on the Web, and most sites will automat- 
ically serve up index.html when you hit the bare domain. In other words, 
when you point a browser at example.com, the server will automatically show 
you example.com/index.html. (Those links work, by the way; amazingly, the 
HTML standard specifically reserves the site example.com for examples just 
like this one!) 

With the repo initialized, we’re now ready to push our (nearly) empty repo 
up to GitHub. As in Learn Enough Git to Be Dangerous, you should go to 
github.com, log in if necessary, and then create a new repository using the name 
sample website and the description “A sample website for Learn Enough 
HTML to Be Dangerous”, as shown in Figure 6 and Figure 7.% 


a + Hl- 


New repository 


Repositories eee 
po New organization 


Figure 6: The GitHub new repository menu. 


5As mentioned in Learn Enough Command Line to Be Dangerous, the touch technique is a personal favorite, 
but the file doesn’t have to be empty; for example, echo hello > index.html would also have worked. 

CGitHub is constantly updating its user interface (UI), so in these and other figures you may notice slight 
differences compared to what you see in your browser. Use your technical sophistication (Box 1) to resolve any 
discrepancies. 
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00.0. < fa GitHub, Inc. È fu} oO + 


Q Search GitHub Pull requests Issues Gist A + fa~ 


Create a new repository 


A repository contains all the files for your project, including the revision history. 


Owner Repository name 
(3 learnenough + z sample_website Y 
Great repository names are short and memorable. Need inspiration? How about fictional-guide. 


Description (optional) 


| A sample website for Learn Enough HTML to Be Dangerous 


o Public 
Anyone can see this repository. You choose who can commit. 


E ; Private 
You choose who can see and commit to this repository. 
_| Initialize this repository with a README 
This will let you immediately clone the repository to your computer. Skip this step if you're importing an existing repository. 


Add .gitignore: None v Add a license: None y 


Create repository 


Figure 7: Creating a new GitHub repo for our website. 


After creating the remote repo, you should set the remote origin as the main 
URL for the repo, which you can find as shown in Figure 8: 


$ git remote add origin <repo url> 
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eee < @ GitHub, Inc. È olôâla +] 


Quick setup — if you've done this kind of thing before 


[£3] Set up in Desktop of HTTPS SSH https://github.com/learnenough/sample_website.git e 


We recommend every repository include a README, LICENSE, and .giti 


...Or create a new repository on the command line 


echo "# sample_website" >> README. md 
git init 

git add README. md 

git commit -m "first commit" 

git remote add origin https://github.com/learnenough/sample_website.g 
git push -u origin master 


...Or push an existing repository from the command line 


git remote add origin https://github.com/learnenough/sample_v repo U R L & 


git push -u origin master 


...Or import code from another repository 


You can initialize this repository with code from a Subversion, Mercurial, or TFS project. 


Import code 


Y ProTip! Use the URL for this page when adding GitHub as a remote. 


Figure 8: Finding the repo URL. 


At this point, you would ordinarily follow the instructions at GitHub by 
pushing up the default master branch, but recall that GitHub Pages uses the 
special gh-pages branch (Box 3) in place of master. As a result, before 
proceeding we'll create the gh-pages branch using the -b option to git 
checkout’ and then push it to GitHub: 


$ git checkout -b gh-pages 
$ git push -u origin gh-pages 


7As mentioned in Learn Enough Git to Be Dangerous, it’s often convenient to create a co alias, so that we 
can type git co in place of git checkout, but for maximum compatibility this tutorial always uses the full 
command. 
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The result should appear as in Figure 9. Use your technical sophistication 
(Box 1) if any of your results don’t match the ones shown. 


00. < 


ia GitHub, Inc. 


¢ DED 
QO This repository Pullrequests Issues Gist A +- fa-~- 


learnenough / sample_website 


©watchy 2 wStar 0 YFork 0 
<> Code Issues 0 Pull requests 0 Wiki Pulse Graphs Settings 


Asample website for Learn Enough HTML to Be Dangerous — Edit 


W 1 commit V 1 branch O releases 


4% 1 contributor 
Branch: gh-pages + New pull request 


New file Findfile © HTTPS~+ https://github.com/learm É2 QI Download ZIP 


Latest commit e4a2391 16 minutes ago 
E) index.html 


Initialize repository 16 minutes ago 


Help people interest this repository understand your project by adding a README. 


gh-pages 


2016 GitHub, Inc. Terms Privacy Security Contact Help 


Status API Training Shop Blog About Pricing 


Figure 9: The initial repo page at GitHub. 


As noted in Box 3, our sample website is already live on the Web via 


GitHub pages. Its location is given by a github.io URL based on the username 
and repo name (Listing 3). 


Listing 3: The template for a GitHub Pages URL. 


https: //<username>.github.io/<repo_name> 
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For example, the Learn Enough version of the sample website lives at the URL 
http://learnenough.github.io/sample_website. 

If you visit your version of this site, 1t should resolve properly, and it should 
even automatically serve up the contents of index.html. Because those con- 
tents are empty, though, the current appearance is a little underwhelming (Fig- 
ure 10). We'll take our first steps toward changing this sad state of affairs in 
Section 1.3, and then we’ll knock it up a notch starting in Section 2. 


eee oO learnenough.github.io y Ü O 


Figure 10: The current underwhelming appearance of our live website. 


1.2.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people's answers and to record your 
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own, join the Learn Enough Society at learnenough.com/society. 


1. Figure 9 shows a section for a README file about the project. Add 
and commit a file called README .md, taking care to use at least a few 
Markdown tags. What is the result at GitHub? 


2. What happens if you visit <username> .github.io/<repo_name>/- 
README. . md in a browser? What does this imply about including sensi- 
tive information in a public website repo? 


1.3 The first tag 


In order to initialize the Git repository in Section 1.2, we needed only an empty 
index.html file, but of course our sample site will eventually have much 
more than that. In this section, we’ll begin by adding some content in a single 
tag—just enough to give us a site to view, commit, and deploy. That's a huge 
accomplishment, though, and will serve as an essential foundation for what 
follows. 

Now that an empty index page has been created, you should open index . - 
html using your favorite editor, which for the purposes of this tutorial we’ll 
assume is Atom. It’s possible to open the file directly using File > Open, but 
(as noted in Learn Enough Text Editor to Be Dangerous) these days all the cool 
kids open the full HTML project directly at the command line (Figure 11):* 


$ atom . 


(Recall from Learn Enough Command Line to Be Dangerous that . (“dot”) 
refers to the current directory.) 


Image retrieved from https://www. flickr.com/photos/usfwshq/8247653540 on 2016-09-10. Copyright O 2012 
by the U.S. Fish and Wildlife Service and used unaltered under the terms of the Creative Commons Attribution 
2.0 Generic license. 
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Figure 11: All the cool kids open HTML projects directly at the command line. 


Even though we have only one file for now (and possibly a README (Sec- 
tion 1.2.1)), opening the full project is a good habit to cultivate, since it allows 
us to easily open and edit multiple files in the same project. We’ll put this 
technique to good use when we start making additional pages in Section 3.1. 

At this point, we’re ready to fill the index file with some content, which 
should consist of the phrase “Hello, world!” (Listing 4) enclosed in the para- 
graph tag p. Note that the p tag has exactly the same form as the strong tag 
(Figure 5). 


Listing 4: A short paragraph with the contents “Hello, world!”. 
index.html 


<p>Hello, world!</p> 
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We see in Figure 12 that Atom automatically highlights the HTML source, 
which it knows to do because of the . html extension on the filename. This 
syntax highlighting is irrelevant to the computer—in fact, it takes place purely 
in the editor and doesn’t have anything to do with index.html itself—but 
it makes it easier for humans to distinguish the difference between tags and 
content. (This is also why we use syntax highlighting in this tutorial’s code 
listings.) 
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© © index.html — /Users/mhartl/repos/sample_website 


index.html x 


1 <p>Hello, world!</p> 


index.html 1:21 LF UTF-8 HTML Ñ gh-pages [:]+1 


Figure 12: “Hello, world!” in a text editor. 


Having made a change to add content to index.html, let's view the result 
in a browser. On OS X, you can do this by typing open index.html, and 
on many Linux systems you can use xdg-open index.html, but you can do 
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it on almost any system by using a graphical file browser and double-clicking 
the filename (Figure 13). No matter how you do it, the result should be to 
open index.html in the default browser on your system, which should appear 
something like Figure 14. 


00.0 B sample website 
a = | #-) By 10 Q Search 


Favorites Name a Date Modified Size Kind 


© iCloud Drive D index.html Today, 15:10 21 bytes HTML 
<3 Dropbox 
e AirDrop 

>; Applications 
EJ Desktop 
hai) Documents 
o Downloads 
H Movies 

E TV Shows 
del Music 

En Pictures 
GQ mhartl 


¿A Google Drive 


E repos 
Devices 


© Remote Disc @ Macintosh HD > [Mj Users > @ mharti > PM repos > B] sample_website > © index.html 


Figure 13: Double-click index.html to open it in the default browser. 
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eee « E file:///Users/mhartl/repos/sample_website/index.html 2 À (m) se 


Hello, world! 


Figure 14: The index page in a local browser. 


Note that the “URL” in this Figure 14 will be a local file, like this: 


file:///Users/mhartl/repos/sample website/index.html 


This is because the index page is on our local system, and hasn't yet been 
deployed to the live Web. 

We know how to remedy this, though —commit our changes to the local Git 
repository and push up to GitHub Pages: 
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$ git commit -am "Add a short paragraph" 
$ git push 


Upon refreshing the browser pointed at the sample website’s GitHub Pages 
URL (Listing 3), the result should look something like Figure 15. (You may 
have to wait a few moments for GitHub Pages to load your site. This happens 
only the first time, and on subsequent requests the response will be lightning- 


fast.) 


eee « E learnenough.github.io 


Hello, world! 


Figure 15: The index page on the live Web. 


Although the appearance is identical to the local version in Figure 14, by 
inspecting the address bar you should be able to confirm that the URL is at 
github.io, which means that the page is now available on the live Web. 
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Congratulations! You’ve just published a production website. 


1.3.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Replace the contents of index.html with the markup from Listing 2. 
Can you guess what the a tag does? 


2. Use your browser’s web inspector to inspect the source from the previous 
exercise. (Google for “<browser> web inspector” to learn how to use 
your browser’s web inspector. Or just right-click.) Does it differ in any 
way from Listing 2? 


1.4 An HTML skeleton 


Although modern web browsers are highly fault-tolerant and will render simple 
HTML like Listing 4 just fine, it’s dangerous to rely on this behavior. Indeed, 
we saw in Learn Enough Git to Be Dangerous that omitting a single tag resulted 
in the trademark character ™ not rendering properly. This is exactly the sort of 
thing that can go wrong when you don’t use a fully valid HTML page. To avoid 
these sorts of problems, from now on all of our sample web pages will use valid 
HTML to ensure that they will render properly in the broadest possible range 
of browsers. 
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OOS haous Michael 


€ ca file:///Users/mharti/repos/website/about.htm! “2 | 


About 


This site is a sample project for the awesome Git tutorial Learn Enoughd,,¢ Git to Be Dangerous 


Oops, the ™ in Learn 
Enough™ doesn't 
display correctly 


Figure 16: The broken About page from Learn Enough Git to Be Dangerous. 


The prototypical HTML skeleton begins with an html tag containing two 
elements, a head and a body. These latter tags are nested inside the html tag, 
as follows: 


<html1><head></head><body></body></html> 


Because this is hard to read, it’s conventional to format the tags using spaces 
and newlines to make the structure more apparent at a glance: 
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<html> 
<head> 
</head> 
<body> 
</body> 

</html> 


Because HTML generally ignores extra space, it makes no difference in the 
appearance of the page, but this formatting makes it easier for us to understand 
the source of the document (Box 4). 


Box 4. Formatting HTML 


In order to make HTML easier to read, it’s conventional to add extra spaces 
and newlines to make the document’s structure clear at a glance. It might look a 
little strange at first, but it’s a style convention in the development world that helps 
keep source code readable (and coders sane). 

Generally speaking, HTML ignores extra space when displaying in a browser, 
SO 


<p>Hello, world!</p> 
will look the same as 
<p>Hello, 
wor Ld! 


</p> 


It’s a good practice to keep your HTML formatting tidy, and it’s clear that the 
former is easier to read. 
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The readability of the markup can change with time, though, especially after 
the text grows to more than a couple of sentences, or when there are additional 
HTML elements nested inside. To keep our content straight and not lose track of 
tags, in these cases we’ll need to format the code more rigorously. 

There are no universal rules for formatting markup, but a good rule of thumb 
is to put new tags on their own line unless they fit easily on one, with lines inside 
those tags indented one level: 


<p>Hello, world!</p> 


<p> 
Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam 

</p> 


The main exception to the new-line rule involves tags that modify text in 
a paragraph. For instance, most people do not add line breaks or indentation 
for elements that are inside lines of text (referred to as inline elements) like the 
<strong>make them strong</strong> example from Listing 1. We’ll 
talk more about these types of inline elements, and how they differ from so-called 
block elements, in Section 3.2. 

What constitutes an indentation “level” varies by developer, but we prefer the 
two-space convention shown above. Four spaces are also common, but in our 
experience this sends the content running off the right side of the page a little too 
fast. Some developers use tabs instead of spaces, but (at the risk of starting a 
holy war) we think this should be strenuously avoided. The main issue is that the 
display of tab characters is device-dependent, so markup that looks great in a text 
editor could look terrible using less at the command line. 

It’s important to make sure your editor is configured properly to use spaces 
(sometimes confusingly called emulated tabs) instead of genuine tabs. Refer to 
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Learn Enough Text Editor to Be Dangerous or use your technical sophistication 
(Box 1) to figure out how. 

Finally, it’s worth noting that many modern text editors include a way to for- 
mat HTML automatically. For example, in Atom it's Edit > Lines > Auto 
Indent. This can be a big help when indenting larger HTML files, especially if 
they come from an outside source and aren’t already nicely formatted. 


The section of the HTML that is wrapped by <head> and </head> is a 
header container that defines metadata, a fancy word that just means data about 
data. This <head> section is not displayed to users in their browser window, 
and therefore gives developers the ability to tell the browser where to find other 
files (such as CSS and JavaScript) that will be used to properly display the 
page’s content, without having that information show up in the actual content 
of the web page. (We’ll cover more things that can be added to the HTML 
header starting in Learn Enough CSS & Layout to Be Dangerous.) 

Meanwhile, the content inside <body> and </body> is what gets displayed 
to the browser. Every website you’ve ever seen consists of content inside an 
HTML body tag. Once we’ve defined the contents of the head tag, most of 
the modifications we’ll make to the site will be inside the body tag. 

To complete the skeleton, there are only two more required elements, one 
required and one optional but strongly recommended. First, we need to tell 
browsers what the document type is, and inside the head tag we need to define 
a nonempty title, as seen in Listing 5. 


Listing 5: A nearly complete HTML skeleton. 


<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
</head> 
<body> 
</body> 
</html> 
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Here the DOCTYPE is an irregular tag, and you should not spend even a mil- 
lisecond worrying about its exact form. (Why is there an exclamation point 
before DOCTYPE? We have no idea.) Meanwhile, the title tag has exactly the 
same form as the p tag we saw in Section 1.3 (and the strong tag before that 
(Figure 5)). 

As you can verify by using the W3C HTML validator, the page in Listing 5 
validates as HTMLS (Figure 17). (An empty title would be invalid, but an 
empty body is fine.) 


Document checking completed. No errors or warnings to show. 
Source 


1. <!DOCTYPE html>” 

2. <html> 

3 <head>” 

4. <title>Page Title</title> 
5. </head> 

6 <body> 

7 </body> 

8 </html> 


Figure 17: The HTML in Listing 5 is valid but incomplete. 


On the other hand, we learned in Learn Enough Git to Be Dangerous (Fig- 
ure 16) that we need one more thing: we need to tell the browser which char- 
acter set to use so that it can handle the expanded range of characters (called 
Unicode), which includes symbols like ™ and ©, accented characters (as in 
voila), etc. We can do this by adding the meta tag to the head, as shown in 
Listing 6. 


Listing 6: Adding a meta tag to define the character set. 


<!DOCTYPE html> 
<html> 
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<head> 
<title>Page Title</title> 
<meta charset="utf-8"> 
</head> 
<body> 
</body> 
</html> 


By the way, the meta tag is a special kind of tag called a void element, and 
doesn’t have a closing tag. Because of this, void element are also called self- 
closing tags. 

With that, the skeleton is complete (Figure 18),? and is listed again for 
reference in Listing 7. 


“Image retrieved from https://www.flickr.com/photos/puuikibeach/6168133195 on 2016-01-14. Copyright © 
2011 by davidd and modified under the terms of the Creative Commons Attribution 2.0 Generic license. Modified 
image copyright O 2016 by Michael Hartl and released under the Creative Commons Attribution 2.0 Generic 
license. 
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© DD JA 0 Ah 4 Nm 


Figure 18: A complete HTML skeleton. 


Listing 7: The skeleton for a basic HTML document. 


<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<meta charset="utf-8"> 
</head> 
<body> 
</body> 
</html> 


Because of the importance of this HTML skeleton, let’s review its elements 
line by line: 


35 


1. The doctype declaration 

2. Opening html tag 

3. Opening head tag 

4. Opening and closing title tags (with the content of the page title) 
5. The meta tag defining the character set 

6. Closing head tag 

7. Opening body tag 

8. Closing body tag 


9. Closing html tag 


Combining the original paragraph from Listing 4 with the skeleton in List- 
ing 7 gives us the code for the first valid HTML page in our sample website, as 
shown in Listing 8. 


Listing 8: A valid “Hello, world!” page. 


index.html 


<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<meta charset="utf-8"> 
</head> 
<body> 
<p>Hello, world!</p> 
</body> 
</html> 


Note in Listing 8 that we've placed the paragraph from Listing 4 inside the 
body tag, as required by the HTML standard. 
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After refreshing the browser, the result of Listing 8 is virtually the same as 
we saw in Figure 15. The only visible difference in the body of the page is a 
small amount of additional space around the paragraph, as shown in Figure 19. 


eee E file:///Users/mhartl/repos/sample_website/index.html » 4 o bl 


Hello, world! 


Figure 19: A valid “Hello, world!” page. 


A second, browser-dependent difference involves the page title, which 
some browsers display in the default tab (Figure 20), and others don't show 
unless you have a second tab in addition to the first (Figure 21). In any case, 
the page title is needed even if it’s not displayed, as it’s required by the HTML 
standard, and is important for screen readers and the web spiders used by search 
engines to index the Web. 
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Hello, world! 


Figure 20: The page title in Chrome. 
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e 


eee < file:///Users/mhartl/repos/sample_website/index.html o ® 


~ + 


QD 


Hello, world! 


Page Title 


Figure 21: The page title in Safari. 


With that, we’re ready to commit our changes and push the results to Git- 
Hub Pages: 


$ git commit -am "Convert index page to fully valid HTML" 
$ git push 


The result appears in Figure 22. 
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eee < am) learnenough.github.io £ 6 O | 


Hello, world! 


Figure 22: The valid “Hello, world!” page in production. 


1.4.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people's answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Using the HTML validator, confirm that Listing 6 is valid HTML. 


2. Remove </title> from Listing 9 and verify that it breaks the page (Fig- 
ure 23). This underscores the importance of closing your tags. Confirm 
using the HTML validator that the resulting code fails validation. 
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3. By pasting in the contents of Listing 10 into index.html, confirm that 
the browser ignores the extra whitespace (including newlines) in the 
mailing address shown in Listing 10. 


4. By adding the break tag <br> to the end of each of the first two lines of 
the address, obtain the nicely formatted address shown in Figure 24. 


Listing 9: The index page with a missing closing tag. 
index.html 


<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title 
<meta charset="utf-8"> 
</head> 
<body> 
</body> 
</html> 
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file:///Users/mhartl/repos/sample_website/index.htm| È 


e... < 


ia 


E 


Figure 23: The look of failure... Close your tags! 


Listing 10: An unformatted address. 


<!DOCTYPE html> 
<html> 
<head> 
<title>Who am I?</title> 
<meta charset="utf-8"> 
</head> 
<body> 
Jean Valjean 
55 Rue Plumet 
Amonate, VA 24601 
</body> 
</html> 
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eco [Em] file:///Users/mhartl/repos/sample_website/index.html A ® O 


Jean Valjean 
55 Rue Plumet 
Amonate, VA 24601 


Figure 24: A nicely formatted address. 


2 Filling in the index page 


Now that we’ve created and deployed a valid HTML page, it’s time to start 
filling in the sample website. We’ll begin by scoping out the structure of our 
index page while adding a more normal-sized paragraph (Section 2.1). We’ll 
then format the resulting text (Section 2.2) while adding links (Section 2.3) 
and images (Section 2.4). Starting in Section 3, we’ll add two more pages to 
go along with our index page, introducing several more important HTML tags 
along the way. 
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2.1 Headings 


As noted in Section 1.2, our main index page will include some information 
about Learn Enough to Be Dangerous, so we’ll start by updating the title tag 
contents with a new title, as shown in Listing 11. 


Listing 11: Adding a new title. 


index.html 


<!DOCTYPE html> 
<html> 
<head> 
<title>Learn Enough to Be Dangerous</title> 
<meta charset="utf-8"> 
</head> 
<body> 
<p>Hello, world!</p> 
</body> 
</html> 


Next, we”1l replace the paragraph in the HTML body with several headings, 
constituting an outline of our document. The results appear in Listing 12. 


Listing 12: Scoping out our index page with headings. 
index.html 


<!DOCTYPE html> 
<html> 
<head> 
<title>Learn Enough to Be Dangerous</title> 
<meta charset="utf-8"> 
</head> 
<body> 


<hl1>The Learn Enough Story</h1> 
<h2>Background</h2> 
<h2>Founders</h2> 

<h3>Michael Hart1</h3> 


<h3>Lee Donahoe</h3> 
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<h3>Nick Merwin</h3> 


</body> 
</html> 


Listing 12 shows how to use the HTML header tags h1, h2, and h3, which rep- 


resent three levels of headings. In this case, the top-level h1 heading contains 
the main subject of the page: 


<hl1>The Learn Enough Story</h1> 


The next two headings indicate additional subjects—in this case, some back- 
ground on the company and some details about the founders: 


<h2>Background</h2> 


<h2>Founders</h2> 


Because these subjects are subsidiary to the main story, they use the second- 
level heading h2. Finally, Listing 12 uses the third-level heading h3 to list the 
three Learn Enough founders: 


<h3>Michael Hart1l</h3> 
<h3>Lee Donahoe</h3> 


<h3>Nick Merwin</h3> 


As you might guess, most browsers render the top-level h1 heading in a 
large font size, with h2 and h3 getting progressively smaller. (Figuring out 
how many heading sizes HTML supports is left as an exercise (Section 2.1.1).) 
The result appears in Figure 25. 
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The Learn Enough Story 


Background 


Founders 
Michael Hartl 
Lee Donahoe 


Nick Merwin 


Figure 25: The initial headings for the index page. 


2.1.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Listing 12 uses headings h1 down to h3. By experimenting directly in 
index.html, determine how many levels of headings HTML supports. 
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2.2 Text formatting 


Having added the headings to block out the structure of our document, let’s 
now add an introductory paragraph describing the subject of the page. Unlike 
our previous one-line paragraph (Listing 4), this paragraph will include sev- 
eral lines, as well as requiring some text formatting (this section) and a link 
(Section 2.3). 

The paragraph itself appears in Listing 13, where the vertical dots indicate 
omitted content (just so we don’t have to include all the tags in every code 
listing). 


Listing 13: Adding a paragraph. 


index.html 


<hl1>The Learn Enough Story</h1> 


<p> 
Learn Enough to Be Dangerous is a leader in the movement to teach 
technical sophistication, the seemingly magical ability to take 
command of your computer and get it to do your bidding. This includes 
everything from command lines and coding to guessing keyboard shortcuts, 
Googling error messages, and knowing when to just reboot the darn thing. 
We believe there are at least a billion people who can benefit from 
learning technical sophistication, probably more. To join our 
movement, sign up for our official email list now. 

</p> 


Note that the content is now indented inside the p tag: 


<p> 
content 
</p> 


As discussed in Box 4, this makes the structure easier to see without affecting 
the appearance of the page. 
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It’s also worth noting that Listing 13 includes newlines at the end of each 
line, but this is mainly so that the paragraph contents fit within in the constraints 
of a book. As seen in Figure 26, these newlines don’t have any effect on the 
display, and in real life it’s probably more common to have the content be 
all on one line, and simply enable word wrap (called “soft wrap” in Atom), 
as described in Learn Enough Text Editor to Be Dangerous. This is what we 
recommend you do if you type the contents of Listing 13 in by hand. 


eee < im] file:///Users/mhartl/repos/sample_website/index.htm| wn ri} 2 |e 


The Learn Enough Story 


Learn Enough to Be Dangerous is a leader in the movement to teach technical sophistication, the seemingly magical ability to take command of your 
computer and get it to do your bidding. This includes everything from command lines and coding to guessing keyboard shortcuts, Googling error messages, 
and knowing when to just reboot the darn thing. We believe there are at least a billion people who can benefit from learning technical sophistication, 
probably more. To join our movement, sign up for our official email list now. 


Background 
Founders 
Michael Hartl 
Lee Donahoe 


Nick Merwin 


Figure 26: Adding a paragraph. 


2.2.1 Emphasized text 


The paragraph in Listing 13 has the right content, but it also introduces the 
new term technical sophistication, and it’s a common typesetting convention 
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to emphasize such terms using italics. As mentioned briefly in Box 2, we can 
accomplish this using the em tag, like this: 


<em>technical sophistication</em> 


Applying this idea to Listing 13 gives the result shown in Listing 14. 


Listing 14: Emphasized text. 


index.html 


<h1>The Learn Enough Story</h1> 


<p> 
Learn Enough to Be Dangerous is a leader in the movement to teach 
<em>technical sophistication</em>, the seemingly magical ability to take 
command of your computer and get it to do your bidding. This includes 
everything from command lines and coding to guessing keyboard shortcuts, 
Googling error messages, and knowing when to just reboot the darn thing. 
We believe there are at least a billion people who can benefit from 
learning technical sophistication, probably more. To join our 
movement, sign up for our official email list now. 

</p> 


We can confirm that this worked by refreshing the browser, which shows that 
technical sophistication is properly emphasized (Figure 27). 
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The Learn Enough Story 
Learn Enough to Be Dangerous is a leader in the movement to pe ce aophlseicann the seemingly magical ability to take command of your 


computer and get it to do your bidding. This includes everything from command lines and coding to guessing keyboard shortcuts, Googling error messages, 
and knowing when to just reboot the darn thing. We believe there are at least a billion people who can benefit from learning technical sophistication, 
probably more. To join our movement, sign up for our official email list now. 


Background 
Founders 
Michael Hartl 
Lee Donahoe 


Nick Merwin 


Figure 27: Emphasized text. 


2.2.2 Strong text 


As we saw briefly in Section 1.1, another possibility for drawing attention to 
particular text is to make it strong using the strong tag, which most browsers 
render as boldface text. In this case, we’d like to indicate the strength of our be- 
lief that at least a billion people can potentially benefit from learning technical 
sophistication, which we can do like this: 


<strong>at least a billion people</strong> 


Applying this idea to Listing 14 gives Listing 15. 
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Listing 15: Strong text. 
index.html 


<p> 
Learn Enough to Be Dangerous is a leader in the movement to teach 
<em>technical sophistication</em>, the seemingly magical ability to take 
command of your computer and get it to do your bidding. This includes 
everything from command lines and coding to guessing keyboard shortcuts, 
Googling error messages, and knowing when to just reboot the darn thing. 
We believe there are <strong>at least a billion people</strong> who 
can benefit from learning technical sophistication, probably more. To 
join our movement, sign up for our official email list now. 

</p> 


Refreshing the browser confirms that the text is now set in bold (Figure 28). 
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The Learn Enough Story 


Learn Enough to Be Dangerous is a leader in the movement to teach technical sophistication, the seemingly magical ability to take command of your 
computer and get it to do your bidding. This includes everything from command lines and coding to guessing keyboard shortcuts, Googling error messages, 


and knowing when to just reboot the darn thing. We believe there arejat least a billion people|who can benefit from learning technical sophistication, 


probably more. To join our movement, sign up for our official email list now. 
Background 

Founders 

Michael Hartl 

Lee Donahoe 


Nick Merwin 


Figure 28: Strong text. 


2.2.3 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Add the paragraph shown in Listing 16 under founders, then make the 
text at least a billion people bold (Figure 29). 


2. What happens if you nest the em and strong tags? Is is possible to make 
something both italic and bold? 
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Listing 16: A paragraph with something to be made stronger. 
index.html 


<h3>Founders</h3> 


<p> 
Learn Enough to Be Dangerous was founded in 2015 by Michael Hartl, Lee 
Donahoe, and Nick Merwin. We believe that the kind of technical 
sophistication taught by the Learn Enough tutorials can benefit 
at least a billion people, and probably more. 

</p> 
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The Learn Enough Story 


Learn Enough to Be Dangerous is a leader in the movement to teach technical sophistication, the seemingly magical ability to take command of your 
computer and get it to do your bidding. This includes everything from command lines and coding to guessing keyboard shortcuts, Googling error messages, 
and knowing when to just reboot the darn thing. We believe there are at least a billion people who can benefit from learning technical sophistication, 
probably more. To join our movement, sign up for our official email list now. 


Background 

Founders 

Learn Enough to Be Dangerous was founded in 2015 by Michael Hartl, Lee Donahoe, and Nick Merwin. We believe that the kind of technical sophistication 
taught by the Learn Enough tutorials can benefifat least a billion people] and probably more. 

Michael Hartl 

Lee Donahoe 

Nick Merwin 


Figure 29: The appearance of a properly modified Listing 16. 


2.3 Links 


As mentioned in Section 1.1, much of the point of the Web is hypertext, with 
hyperlinks that let us move from one page to the next. The way to make such 
hyperlinks (or links for short) is with the HTML anchor tag a. (Why isn’t it 
called link? We don’t know, but at least a is short.) 

In reading the paragraph from Listing 13, you may have noticed that the 
line 
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sign up for our official email list now 


is practically begging for a link to a place where people can actually sign up for 
the email list. The exact text to use for the link is the subject of some debate, 
with some holding that links should be nouns, with others preferring to link a 
call to action if possible. We take a pragmatic approach, linking based on what 
seems most natural. In this case, we’ll go with linking the text “sign up for our 
official email list”, like this: 


<a href="http://learnenough.com/email">sign up for our official email list</a> 


This contains our first example of an attribute, which 1s a bit of text inside an 
HTML tag that supplies extra information about how to process it. In this case, 
the attribute is href, for “hypertext reference”, and the value is the URL for 
the Learn Enough email list signup form. 

Adding the email list link to the paragraph from Listing 15 gives Listing 17. 
Note how the text of the link breaks across two lines (something we saw before 
in Listing 1). Because HTML is insensitive to whitespace, this is effectively 
the same as having it all on one line. 


Listing 17: Adding a link. 


<p> 
Learn Enough to Be Dangerous is a leader in the movement to teach <em> 
technical sophistication</em>, the seemingly magical ability to take 
command of your computer and get it to do your bidding. This includes 
everything from command lines and coding to guessing keyboard shortcuts, 
Googling error messages, and knowing when to just reboot the darn thing. 
We believe there are <strong>at least a billion people</strong> who 
can benefit from learning technical sophistication, probably more. To 
join our movement, <a href="http://learnenough.com/email">sign 
up for our official email list</a> now. 

</p> 
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The result of Listing 17 appears in Figure 30. 


000. < ] file:///Users/mhartl/repos/sample_website/index.htm| o ra] oO rm 


The Learn Enough Story 


Learn Enough to Be Dangerous is a leader in the movement to teach technical sophistication, the seemingly magical ability to take command of your 
computer and get it to do your bidding. This includes everything from command lines and coding to guessing keyboard shortcuts, Googling error messages, 
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Michael Hartl 
Lee Donahoe 


Nick Merwin 


Figure 30: The result of adding a link. 


Now that we know how to make links, we’re ready to add a paragraph on 
the background of Learn Enough to Be Dangerous, which is both rich with 
links and includes further examples of the text-formatting tags shown in Sec- 
tion 2.2. The resulting paragraph, shown in Listing 18, should be placed under 
the second-level heading from Listing 12. Because it contains so many good 
examples of the tags we’ve covered so far, we recommend you type it in by 
hand. 
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Listing 18: Adding a paragraph using several useful tags. 


<h2>Background</h2> 


<p> 
Learn Enough to Be Dangerous is an outgrowth of the 
<a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> and the 
<a href="http://www.softcover.io/">Softcover publishing platform</a>. 
This page is part of the sample site for 
<a href="http://learnenough.com/html-tutorial"><em>Learn Enough HTML to 
Be Dangerous</em></a>, which teaches the basics of 
<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup 
<strong>L</strong>anguage, the universal language of the World Wide Web. 
Other related tutorials can be found at 
<a href="http://learnenough.com/">learnenough.com</a>. 

</p> 


It’s worth noting that Listing 18 contains an example of tag nesting, in the form 
of the link to the present tutorial: 


<a href="..."><em>Learn Enough HTML to Be Dangerous</em></a> 


As you might expect, this produces a link to emphasized text, as shown in 
Figure 31. You might also note that some of the links in Figure 31 are a different 
color, which is an indication that the links have been followed. (This is the 
default behavior for link colors, but it can be overridden by CSS, as discussed 
in Learn Enough CSS & Layout to Be Dangerous and mentioned briefly in 
Section 4.6.1.) 
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Founders 


Learn Enough to Be Dangerous was founded in 2015 by Michael Hartl, Lee Donahoe, and Nick Merwin. We believe that the kind of technical sophistication 
taught by the Learn Enough tutorials can benefit at least a billion people, and probably more. 


Michael Hartl 
Lee Donahoe 


| Nick Merwin 


Figure 31: Adding a paragraph with formatting and links. 


2.3.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 


own, join the Learn Enough Society at learnenough.com/society. 


. Using the content shown in Listing 19, add short founder bios to the 


index page. 


. Now add Twitter follow links as shown in Listing 20. Does the content 


appear as shown in Figure 32? 
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3. It’s sometimes convenient for external links (like those in the previous 
exercise) to open in a new browser tab. To do this, add the attribute 
target="_blank" to each of the Twitter links from Listing 20. Does 
clicking on one of the links open in a new tab, as shown in Figure 32? 


index.html 


Listing 19: Adding short founder biographies. 


<h2>Founders</h2> 


<h3>Michael Hartl</hn3> 


<p> 
Michael is the creator of the <a href="http://railstutorial.org/"> 
Ruby on Rails Tutorial</a> and principal author of the 
<a href="http://learnenough.com/">Learn Enough to Be Dangerous</a> 
introductory sequence. He is an advanced student of 
<a href="http://kravmaga.com/">Krav Maga</a> and has a three-step 
plan for world domination. Rumors that he's secretly a supervillain 
are slightly exaggerated. 

</p> 


<h3>Lee Donahoe</h3> 


<p> 
When he's not literally swimming with sharks or hunting powder stashes 
on his snowboard, you can find Lee in front of his computer designing 
interfaces, doing front-end development, or writing some of the 
interface-related Learn Enough tutorials. 

</p> 


<h3>Nick Merwin</h3> 


<p> 
You may have seen him shredding guitar live with Capital Cities on Jimmy 
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd 
at heart. He's just as happy shredding well-spec'd lines of code from a 
tour bus as he is from his kitchen table. 

</p> 
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Listing 20: Adding Twitter links to the bios. 


index.html 


<h3>Michael Hart1</h3> 


<p> 
You should follow Michael on Twitter 
<a href="http://twitter.com/mhart1">here</a>. 
</p> 


<h3>Lee Donahoe</h3> 


<p> 
You should follow Lee on Twitter 
<a href="https://twitter.com/leedonahoe">here</a>. 
</p> 


<h3>Nick Merwin</h3> 


<p> 
You should follow Nick on Twitter 
<a href="https://twitter.com/nickmerwin">here</a>. 
</p> 
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Figure 32: The index page after the completion of the exercises. 


2.4 Adding images 


At this point, our index page is coming into shape, but it’s still missing a crit- 
ical feature: what would a website be without images (of cats!)? Fortunately, 
adding images is similar to adding links, although there is an important differ- 
ence in the structure of the tags. Recall from Section 2.3 that anchor tags take 
the form 


<a href="http://example.com/">Example site</a> 


We can include images in a similar way using the img tag, with a source at- 
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tribute src and an alternate attribute alt: 


<img src="images/kitten. jpg" alt="An adorable kitten"> 


Here src has a path to the image (either on the filesystem or on the Web), 
while alt lets developers add a bit of alternate text that describes the image 
in words. On some browsers, this text will display if the user’s browser has a 
problem loading the image, but more importantly it will be read aloud (or even 
presented as braille) by screen readers used by the visually impaired, and is 
required by the HTML standard.!° 

The important difference mentioned above is that the img tag doesn't look 
like a typical tag, with content inside open and closing tags (Figure 5). If it did, 
it would look like this: 


<img src="..." alt="...">content</img> 


Instead, the img tag has no content and no closing tag: 


<img sre=u LE => 


That final > is all that’s needed to close an img tag—like the meta tag discussed 
in Section 1.4, img is a void element (self-closing tag). A second variant uses 
/> at the end, like this: 


<img srecu.. V wale=! r= 


This syntax is designed to conform to XML, a markup language related to 
HTML, but using /> is not required in HTMLS. We mention it mainly because 
you will still sometimes run across the XML-style syntax in other people’s 
markup, and it’s important to know that the two styles are exactly equivalent. 


10The alt attribute is also useful to tell the search engine “spider” programs that crawl the web which things 
appear in the image. 
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Because the World Wide Web was apparently invented to share pictures 
of furry felines, we’ll add an image of an adorable kitten to our sample index 
page, as shown in (Figure 33).!! 


Figure 33: The likely inspiration for the creation of the World Wide Web. 


In order to link the kitten image, we could link directly to the source of 
Figure 33 from the live Web, like this: 


<img src="http://example.com/images/kitten.jpg" alt="An adorable kitten"> 


This practice, called hotlinking, is generally considered bad form, for reasons 
we'll explain in Section 2.4.1. Instead, we’ll copy the image to the local com- 


Image retrieved from https://www.flickr.com/photos/deborah_s_perspective/14144861329 on 2016-01-09. 
Copyright © 2009 by Deborah and used unaltered under the terms of the Creative Commons Attribution 2.0 
Generic license. 
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puter, which will then be uploaded automatically when we deploy to GitHub 


pages. 
To do this, first create a directory called images: 


$ mkdir images 


Creating a separate images directory isn’t strictly necessary, but it’s useful for 
keeping our main project directory tidy. Next, download the image to the local 
disk using cur1:!? 


$ curl -o images/kitten.jpg -OL cdn.learnenough.com/kitten. jpg 


Once the image is available on our local disk, we can use its location as the 
value of the src attribute. Because the image is part of the same web project 
as index.html, we can use the relative path to the image, like this: 


<img src="images/kitten.jpg" alt="An adorable kitten"> 


The src attribute images/kitten. jpg will automatically be interpreted as 
the correct full path to the file, which locally might be 


file:///Users/mhart1/repos/sample_website/images/kitten. jpg 


and on the server will be something like 


https: //learnenough.github.io/sample_website/images/kitten. jpg 


While we're at it, we'll add a paragraph giving some context about the 
creation of the World Wide Web (including a correction to the wildly inaccurate 
claims of its feline origins). The result appears in Listing 21. 


!2The curl command is covered in Learn Enough Command Line to Be Dangerous. 
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Listing 21: An image, with a paragraph about the original web developer. 
index.html 


<h2>Background</h2> 


<p> 
HTML was created by the original "web developer", computer scientist 
<a href="https://en.wikipedia.org/wiki/Tim_Berners—Lee">Tim 
Berners-Lee</a>. It's not true that Sir Tim invented HTML in order to 
share pictures of his cat, but it would be cool if it were. 

</p> 


<img src="images/kitten.jpg" alt="An adorable kitten"> 


After adding the contents of Listing 21 to index. html, the sample index page 
should look something like Figure 34. 
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HTML was created by the original "web developer", computer scientist Tim Berners-Lee. It's not true that Sir Tim invented HTML in order to share pictures 
of his cat, but it would be cool if it were. 


Background 


Figure 34: An awww-bligatory kitten image. 


2.4.1 Hotlinking 


We mentioned above that it’s possible to link directly to images on the Web, a 
practice called hotlinking. The way to do this is to use a fully qualified URL as 
the src parameter, like this: 


<img src="http://example.com/images/example.jpg" alt="A nonexistent example"> 


Hotlinking isn’t usually a good practice, mainly because the image has to be at 
that exact spot on that exact site or it will not load, putting you at the mercy of 
the site’s maintainer. The person who runs the site can also be charged for the 
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bandwidth used to serve the image, so hotlinking is considered inconsiderate as 
well. For these reasons, we generally recommend using local images for most 
applications.!° 

There are some important exceptions to the hotlinking rule, though, includ- 
ing an application known as Gravatar, which stands for “globally recognized 
avatar’. Gravatar allows you to associate standard images with particular email 
addresses, and is used to display profile pictures on a large variety of websites, 
including GitHub and WordPress.!* Gravatar images are specifically designed 
for hotlinking, so in this case the practice is actually encouraged. The image 
could still change, but in this case it’s not a bug, it’s a feature, because it gives 
the user control over their preferred profile image—if they update their picture, 
the change will automatically propagate to every site using the right Gravatar 
URL. 

Gravatar URLs include a long string of hexadecimal digits (base 16, mean- 
ing 0-9 and a-f), like this: 


https://gravatar.com/avatar/ffda7d145b83c4b118£982401£962ca6 


Here ££da7d145b83c4b118£982401£962ca6 is a unique string based on 
the email address associated with the Gravatar.! Gravatar URLs also support 
query parameters, which are additional pieces of information that come after 
the main URL, like ?s=150: 


https: //gravatar.com/avatar/ffda7d145b83c4b118f£982401£962ca6?s=150 


Query parameters come after a question mark ?, in this case s=150, which 
consists of a key s and a value 150.'% As you might be able to guess, s stands 


¿Here “local” means “local to the site” (which might be a remote server like GitHub Pages), not necessarily 
local to your development machine. 

*Indeed, Gravatar was originally developed by GitHub cofounder Tom Preston-Werner, and was later acquired 
by Automattic, the parent company of WordPress. 

“It’s calculated using something called the MD5 message-digest algorithm, which is covered in the Ruby on 
Rails Tutorial. 


Multiple query parameters are separated by the ampersand symbol &, as in 
http://example.com?foo=18bar=2. If you start looking at the URLs in the address bar of your 
browser, you”1l see these query parameters everywhere. 
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for “size”, and in this case the query parameter s=150 sets the Gravatar size 
to 150 pixels. (By design, Gravatars are square, so a single parameter specifies 
the size uniquely.) 

Using our newfound Gravatar knowledge, let’s add avatar images to our 
index page under each of the Learn Enough to Be Dangerous founder bios (as 
added in Listing 19 from the exercises in Section 2.3.1). In a typical dynamic 
web application, such as that developed in the Ruby on Rails Tutorial, these 
URLs would be calculated on the fly based on the users’ email addresses, but 
for convenience we’ll supply you with the proper URLs. The result appears 
in Listing 22. (We’ve removed the leading indentation in Listing 22 so that 
the URLs fit, but in your index . html we suggest you keep the indentation as 
before.) 


Listing 22: Adding Gravatar hotlinks for the Learn Enough founders. 


<h2>Founders</h2> 


<h3>Michael Hart1l</h3> 


<img src="https://gravatar.com/avatar/ffda7d145b83c4b118£982401£962ca6?s=150" 
alt="Michael Hartl"> 


<h3>Lee Donahoe</h3> 


<img src="https://gravatar.com/avatar/b65522a6£3a6899705d119d7aa232a6d?s=150" 
alt="Lee Donahoe"> 


<h3>Nick Merwin</h3> 


<img src="https://gravatar.com/avatar/e2d6ce2ba5c1b6d67 4ae8f££2b3b45d23?s=150" 
alt="Nick Merwin"> 
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The result of adding the contents of Listing 22 should look something like 
Figure 35, although your page may not match exactly (Section 2.4.2). 


0050. < > file:///Users/mhartl/repos/sample_website/index.html o ra oO TE 
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Michael is the creator of the Ruby on Rails Tutorial and principal author of the Learn Enough to Be Dangerous introductory sequence. He is an advanced 
student of Krav Maga and is working on a three-step plan for world domination. Rumors that he's secretly a supervillain are slightly exaggerated. 


You should follow Michael on Twitter here. 


Lee Donahoe 


When he's not literally swimming with sharks or hunting powder stashes on his snowboard, you can find Lee in front of his computer designing interfaces, 
doing front-end development, or writing some of the interface-related Learn Enough tutorials. 


You should follow Lee on Twitter here. 


Nick Merwin 


Figure 35: Adding Gravatar images. 


With that, our sample website’s index page has (nearly) taken its final form, 
so now is a good time to commit the changes and push to the live server at 
GitHub Pages: 


$ git add -A 
$ git commit -m "Add some images" 
$ git push 


The result should look something like Figure 36. 
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HTML was created by the original "web developer”, computer scientist Tim Berners-Lee. It's not true that Sir Tim invented HTML in order to share pictures 
of his cat, but it would be cool if it were. 


Background 


Figure 36: The sample index page on the live Web. 


2.4.2 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people's answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Why might the images shown in Figure 35 not match your results ex- 
actly? Hint: It’s not a bug, it’s a feature. 


2. The kitten image in Figure 33 is available under a Creative Commons 
license that requires attribution. We’ll fulfill this requirement by link- 
ing the image on our page to the original image’s URL, which involves 
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nesting the a and img tags, as shown in Listing 23. (Be sure to replace 
FILL_IN with the right URL.) How does this change the page’s (a) ap- 
pearance and (b) behavior? 


3. Under the first paragraph on index.html, let's add a link to the Learn 
Enough Twitter account. First, download the Twitter logo as shown in 
Listing 24. Then, add a link to both the page and the logo image, as 
shown in Listing 25. Be sure to replace FILL_IN with the right path to 
the image. Note that Listing 25 introduces inline styling, which is the 
subject of Section 4. Extra credit: Follow Learn Enough on Twitter here. 


Listing 23: Linking an image. 


index.html 


<p> 
HTML was created by the original "web developer", computer scientist 
<a href="https://en.wikipedia.org/wiki/Tim_Berners—Lee">Tim 
Berners-Lee</a>. It's not true that Sir Tim invented HTML in order to 
share pictures of his cat, but it would be cool if it were. 

</p> 


<a href="FILL_IN"> 
<img src="images/kitten.jpg" alt="An adorable kitten"> 
</a> 


Listing 24: Downloading the Twitter logo. 


$ curl -o images/small_twitter_logo.png \ 
> -OL cdn.learnenough.com/small_twitter_logo.png 


Note that the backslash \ should be typed, but your shell will include > auto- 
matically, so don’t just copy and paste the whole thing. 


Listing 25: Adding links to the Learn Enough Twitter account. 


index.html 


71 


for our official email list</a> now. 
</p> 


<p> 
<a href="http://twitter.com/learnenough" target="_blank" 
style="text-decoration: none; "> 
<img src="FILL_IN"> 
</a> 
You should follow Learn Enough on Twitter 
<a href="http://twitter.com/learnenough" target="_blank">here</a>. 
</p> 


3 More pages, more tags 


Having completed a full index page in Section 2 (and having learned a bunch 
of HTML tags along the way), the time has now come to add a couple more 
pages to our website. This will give us a chance to learn several more useful 
HTML tags, while discovering some of the limitations of our purely hand- 
edited approach. 

The first new addition will be a meta-page on HTML tags themselves, 
which will give us a chance to reinforce the preceding material as we build 
it. The second page includes a lighthearted report on Moby-Dick, one of the 
free books available on the Softcover website. This second page especially 
lends itself to styling, a task we’ll take up in Section 4. 


3.1 An HTML page about HTML 


We'll start by adding a reference page to collect some of the HTML tags we've 
learned about so far. This means creating a new file, which we can do by creat- 
ing a new tab (typically with d6N) and then saving it as tags. html. Another 
method, and a personal favorite, is to run touch tags .htm1 at the command 
line and then use ¿8P to open it the editor. 
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Once you’ve created tags . html, by whatever method, fill it with the con- 
tents of Listing 26. 


Listing 26: Adding the beginning of a page on HTML tags. 
tags.html 


<!DOCTYPE html> 
<html> 
<head> 
<title>HTML Tags</title> 
<meta charset="utf-8"> 
</head> 
<body> 


<h1>Important HTML tags</h1> 
<img src="images/storm_trooper_tagged.jpg" alt="Tagged Storm Trooper"> 


<p> 
This page is designed as a quick reference for some of the common tags 
covered in <a href="http://learnenough.com/html-tutorial"><em>Learn 
Enough HTML to Be Dangerous</em></a>. In the process of making it, we'll 
learn how to make HTML <em>tables</em> via <code>table</code> and 
related tags. 

</p> 


<p> 
The tables below don't include all HTML tags, but they do list many of 
the most important ones. 

</p> 


</body> 
</html> 


Note that Listing 26 involves repeating the HTML skeleton from Listing 7, 
which is an inconvenient duplication of effort. It also becomes increasingly an- 
noying as the number of pages in a site grows, especially if (as is often the case) 
we need to make changes to the head of the document. We’ll deal with this 
issue the Right Way™ in Learn Enough CSS & Layout to Be Dangerous (using 
a so-called templating system), but for now we’ll just live with the annoyance. 

Listing 26 introduces one new tag, the minor but occasionally useful code 
tag: 
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<code>table</code> 


Designed to display pieces of markup or source code, the code tag is rendered 
by most browsers in a monospace font, like this. (In a monospace font, 
all letters have the same width, which is especially convenient when lining up 
formatted code.) 

The page defined by Listing 26 won’t yet render as intended because of the 
img tag, which currently references a nonexistent image. To fix this, download 
the image (which is just a smaller version of the one in Figure 4) to the local 
disk: 


$ curl -o images/storm_trooper_tagged.jpg \ 
> -OL cdn.learnenough.com/storm_trooper_tagged. jpg 


Note that the backslash \ should be typed, but your shell will include > auto- 
matically, so don’t just copy and paste the whole thing. 
The result appears in Figure 37. 
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Important HTML tags 


This page is designed as a quick reference for some of the common tags covered in Learn Enough HTML to Be Dangerous. In the process of making it, we'll 
learn how to make HTML rables via table and related tags. 


The tables below don't include all HTML tags, but they do list many of the most important ones. 


Figure 37: The beginning of an HTML tags page. 


3.1.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people's answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Does the HTML in Listing 26 validate? 


2. As with the kitten image, the Stormtrooper tag image is used under a Cre- 
ative Commons license that requires attribution. By following the model 
in Listing 23, fulfill this requirement by linking the image in Listing 26 
to the original image URL. 
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3.2 Tables 


Now that we’ve got a basic page set up, we’ll make a list of some of the tags 
we”ve learned about so far. Our plan is to indicate the exact HTML code for 
the tag, its name, and its purpose. The result is a table of information, so to 
display it we’ll use the HTML table tag. Because HTML tags divide broadly 
into inline elements and block elements (Box 5), we”1l make a separate table for 
each type of tag. 


Box 5. Inline vs. block 


All of the elements on a page of HTML either flow with the text around them 
or interrupt the flow by creating a box of content that is separate from the other 
content on the page. The first category of tags is known as inline; the second 
category is called block (Figure 38). 

All of the elements that modify text, such as <st rong> and <em>, are inline 
elements, which makes sense since we wouldn’t want text to jump to a new line 
every time we made it bold or italic. Other common inline elements include links 
and (perhaps surprisingly) images. Inline elements take up only as much width on 
the page as is necessary to contain the content inside the tags—you can think of 
inline elements as being shrink-wrapped around the content inside them 

In contrast, block elements always start on a new line, as if there is a line break 
in front of them, so one of their main purposes is to divide the page’s text into 
different presentational groups, such as paragraphs or lists. Unlike inline elements, 
block elements bound the full width of the page, like an inflexible cardboard box. 
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block elements 


Figure 38: Inline vs. block elements. 


3.2.1 Block elements 


A table is defined by opening and closing table tags, with each table row 
defined by the tr tag. Typically, the first row includes labels for the table’s 
columns via table headers, defined by the th tag, as shown in Listing 27. 


Listing 27: Defining a table with headers. 
tags.html 


<p> 
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The tables below don't include all HTML tags, but they do list many of 
the most important ones. 
</p> 


<h2>Block Elements</h2> 


<table> 
<tr> 
<th>Tag</th> 
<th>Name</th> 
<th>Purpose</th> 
</tr> 
</table> 


The result of Listing 27 is shown in Figure 39. Because the natural layout inside 
a file is vertical, whereas the display is horizontal, it can be challenging to 
mentally map table contents to the visual result, but it gets easier with practice. 
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eee < m] file:///Users/mhartl/repos/sample_website/tags.html e 4 o | 


Important HTML tags 


This page is designed as a quick reference for some of the common tags covered in Learn Enough HTML to Be Dangerous. In the process of making it, we'll 
learn how to make HTML tables via table and related tags. 


The tables below don't include all HTML tags, but they do list many of the most important ones. 


Block Elements 


Tag Name Purpose 6 table headers 


Figure 39: Table headers. 


After optionally defining the table headers, tables generally consist of a se- 
ries of table data cells defined by the td tag. We can get started with the content 
of the table by adding a row for the heading tags first introduced in Section 2.1. 
The result (which incidentally solves the exercise from Section 2.1.1) appears 


in Listing 28. 


Listing 28: Adding a row of data. 
tags.html 


<p> 


19 


The tables below don't include all HTML tags, but they do list many of 
the most important ones. 
</p> 


<h2>Block Elements</h2> 


<table> 
<tr> 
<th>Tag</th> 
<th>Name</th> 
<th>Purpose</th> 
</tr> 
<tr> 
<td><code>h1</code>é&ndash; <code>h6</code></td> 
<td>headings</td> 
<td>include a heading (levels lindash; 6) </td> 
</tr> 
</table> 


Listing 28 uses the code tag we saw in Listing 26, and also introduces uses 
&ndash;, which is “character entity reference” for an en dash (a dash roughly 
the width of the letter “n”, like this: —). Because our HTML document uses the 
ut £-8 character set (Listing 7), we could also use a literal en dash —, but the 
entity reference is common, and it’s good to know how to use both. 

This is a lot to handle at once, which makes it good practice for learning to 
visualize the result of HTML markup. Once you have a guess in your mind’s 
eye, you can refresh your browser to see the result (Figure 40). 
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Important HTML tags 


This page is designed as a quick reference for some of the common tags covered in Learn Enough HTML to Be Dangerous. In the process of making it, we'll 
learn how to make HTML tables via table and related tags. 


The tables below don't include all HTML tags, but they do list many of the most important ones. 


Block Elements 


Tag Name Purpose 


h1-n6 headings include a heading (levels 1-6) 


Figure 40: Adding a row of table data. 


We’ve now seen the most important table tags, so we’re ready to fill in the 
table with rows for the other block-level tags we’ve seen so far. These include 
p and the table tags themselves.!” The result appears in Listing 29.18 


Listing 29: A more complete table of HTML block elements. 
tags.html 


"Technically, the td tag is more like an “inline block”, but this distinction isn’t important for our purposes. 
'8Some code listings include yellow highlights for important lines, but we’ll avoid the “wall of yellow” by 
omitting the highlights when there are as many new lines as there are in listings like Listing 29. 
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<p> 
The tables below don't include all HTML tags, but they do list many of 
the most important ones. 

</p> 


<h2>Block Elements</h2> 


<table> 
<tr> 
<th>Tag</th> 
<th>Name</th> 
<th>Purpose</th> 
</tr> 
<tr> 
<td><code>h1</code>éndash; <code>h6</code></td> 
<td>headings</td> 
<td>include a heading (levels lindash; 6) </td> 
</tr> 
<tr> 
<td><code>p</code></td> 
<td>paragraph</td> 
<td>include a paragraph of text</td> 
</tr> 
<tr> 
<td><code>table</code></td> 
<td>table</td> 
<td>include a table</td> 
</tr> 
<tr> 
<td><code>tr</code></td> 
<td>table row</td> 
<td>include a row of data</td> 
</tr> 
<tr> 
<td><code>th</code></td> 
<td>table header</td> 
<td>make a table header</td> 
</tr> 
<tr> 
<td><code>td</code></td> 
<td>table data</td> 
<td>include a table data cell</td> 
</tr> 
</table> 


There are a lot of new rows in Listing 29, so you can copy and paste if you 
want, but you’ll learn more by typing in the tags by hand. (You’ll find that 
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it can be quite cumbersome, which is one reason many real-world tables are 
generated from databases using programming languages like Ruby.) The result 
appears in Figure 41. 


eee E file:///Users/mhartl/repos/sample_website/tags.html if ra ia 


Important HTML tags 


This page is designed as a quick reference for some of the common tags covered in Learn Enough HTML to Be Dangerous. In the process of making it, we'll 
learn how to make HTML tables via table and related tags. 


The tables below don't include all HTML tags, but they do list many of the most important ones. 
Block Elements 
Tag Name Purpose 
hi-hé headings include a heading (levels 1-6) 
p paragraph include a paragraph of text 
table table include a table 
tr tablerow include a row of data 


th table header make a table header 
td table data include a table data cell 


Figure 41: A table for some HTML block elements. 


By the way, you might notice in Figure 41 that the spacing around the 
table data cells isn’t ideal. This is exactly the kind of detail that is handled 


by Cascading Style Sheets (as covered in Learn Enough CSS & Layout to Be 
Dangerous). 
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3.2.2 Inline elements 


Now that we know how to make a basic table, we’re ready to add a new table 
of inline elements as well. Because inline elements by definition don’t start a 
new line, it’s easy to include examples of the tags along with their definitions. 
For example, we can include a working example of the em tag, as shown in 
Listing 30. 


Listing 30: A start at a table of inline tags. 
tags. html 


<h2>Inline Elements</h2> 


<table> 
<tr> 
<th>Tag</th> 
<th>Name</th> 
<th>Purpose</th> 
<th>Example</th> 
<th>Result</th> 
</tr> 
<tr> 
<td><code>em</code></td> 
<td>emphasized</td> 
<td>make emphasized text</td> 
<td><code> ¿em technical sophistication /emé&gt ; </code></td> 
<td><em>technical sophistication</em></td> 
</tr> 
</table> 


Listing 30 introduces the solution to the tricky problem of displaying literal 
angle brackets, which arranges for the browser to display, e.g., <em>technical 
sophistication</em> rather than technical sophistication. The way to do it is 
by “escaping out” < and > with the HTML character entities &1t; (“less than”) 
and &gt; (“greater than”). The result appears in Figure 42. 
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Important HTML tags 


This page is designed as a quick reference for some of the common tags covered in Learn Enough HTML to Be Dangerous. In the process of making it, we'll 
learn how to make HTML tables via table and related tags. 


The tables below don't include all HTML tags, but they do list many of the most important ones. 
Block Elements 


Tag Name e 
hl-h6 headings include a heading (levels 1-6) 
p paragraph include a paragraph of text 
table table include a table 
tr table row include a row of data 
th table header make a table header 
td table data include a table data cell 


Inline Elements 


Tag Name Purpose Example Result 
em emphasized make emphasized text <em>technical sophistication</em> technical sophistication 


Figure 42: A good start at a table of inline elements. 


Some other inline elements we’ve encountered so far are strong, a, img, 
and code. Adding them to the table in Listing 30 is left as an exercise. 


3.2.3 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Follow the template in Listing 31 to add information on the strong, a, 
and img tags. Why does the img tag example use the Bitly link short- 
ener? 
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2. Add an additional row for the code tag. Does the page validate? 


Listing 31: Template for adding strong, a, and img tags. 
Caca o Iain 


<h2>Inline Elements</h2> 


<table> 
<tr> 
<th>Tag</th> 
<th>Name</th> 
<th>Purpose</th> 
<th>Example</th> 
<th>Result</th> 
</tr> 
<tr> 
<td><code>em</code></td> 
<td>emphasized</td> 
<td>make emphasized text</td> 
<td><code>é1t;em&gt;technical sophisticationé1t ; /em&gt ; </code></td> 
<td><em>technical sophistication</em></td> 
</tr> 
<tr> 
<td><code>strong</code></td> 
<td>strong</td> 
<td>make strong text</td> 
<td> 


<code>£1t;strongígt;at least a billion peopleéslt; /strongégt ; </code> 


</td> 
<td>FILL_IN</td> 
</tr> 
<tr> 
<td><code>a</code></td> 
<td>anchor</td> 
<td>make hyperlink</td> 
<td> 
<code> 
&lt;a href="http://learnenough.com/"sgt;Learn Enoughé1t; /a&gt; 
</code> 
</td> 
<td>FILL_IN</td> 
</tr> 
<tr> 
<td><code>img</code></td> 
<td>image</td> 
<td>include an image</td> 
<td> 
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<code> 
img src="http://bit.ly/1MZAFuQ" alt="Michael Hartl" 
</code> 
</td> 
<td>FILL_IN</td> 
</tr> 
</table> 


3.3 Divs and spans 


Having created a new page for our HTML table experiment, we’re now ready to 
make a third page for our sample website. We’ Il add some initial content while 
blocking out the structure with three new tags: heading, div (for division), 
and span. These tags have little to no impact on the page appearance, but they 
help us organize the page and its contents into logical units. All three tags, and 
especially divs and spans, are heavily used when styling web pages using 
CSS (Learn Enough CSS & Layout to Be Dangerous). We'll get a preview of 
this practice when applying inline styles in Section 4. 

The page itself will take the form of a mock book report on the classic 
American whaling novel Moby-Dick, which among other places is available in 
a free Softcover edition. As we’ll see in Section 4, this content will especially 
lend itself to styling. 

The first thing you should do is create a file called moby_dick. html. 
Then, because it’s never wrong to include pictures of animals (even non-cats!) 
on web pages, we’ ll include a picture of sperm whales (Figure 43)!” to go along 
with our report. We’ll also include an image for the book’s cover (Figure 44). 


Image retrieved from https://commons.wikimedia.org/wiki/File:Sperm_whale_pod.jpg on 2016-01-17. 
Copyright © 2013 by Gabriel Barathieu and used unaltered under the terms of the Creative Commons Attribution- 
ShareAlike 2.0 Generic license. 
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Figure 43: A pod of sperm whales. 


88 


soltcover classi 


MOBY-DICK 


OR, THE WHALE 


Figure 44: The cover image for Moby-Dick. 


In order to include the images on our web page, we need to download them 
to the local machine (as we did with the kitten image in Section 2.4): 


$ curl -o images/sperm_whales.jpg -OL cdn.learnenough.com/sperm_whales. jpg 
$ curl -o images/moby_dick.png -OL cdn.learnenough.com/moby_dick.png 
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The initial book report page is fairly long, which makes it an excellent 
exercise in reading and writing HTML. The result, which highlights a few 
especially important lines, appears in Listing 32. Note especially the use of 
target="_blank", which arranges to open links in a new browser tab.?% 
There is also one intentional error in Listing 32; catching and fixing it is left as 
an exercise (Section 3.3.1). 


Listing 32: The initial Moby-Dick book report. 
moby_dick.html 


<!DOCTYPE html> 
<html> 
<head> 
<title>Moby Dick</title> 
<meta charset="utf-8"> 
</head> 
<body> 


<!-- much here to be styled, will do so in last section --> 
<header> 

<h1>A Softcover Book Report</h1> 

<h2>Moby-Dick (or, The Whale) </h2> 
</header> 


<div> 
<p> 
The <a href="http://www.sofcover.io/">Softcover</a> publishing platform 
was designed mainly for ebooks like the 
<a href="http://railstutorial.org/book"><em>Ruby on Rails Tutorial</em> 
book</a> and <a href="http://learnenough.com/html"><em>Learn Enough 
HTML to Be Dangerous</em></a>, but it's also good for making more 
traditional books, such as the novel <em>Moby-Dick</em> by Herman 
Melville (sometimes written as <em>Moby Dick</em>). We present below a 
short and affectionately irreverent book report on this classic of 
American literature. 
</p> 
</div> 


<a href="https://commons .wikimedia.org/wiki/File:Sperm whale_ pod. jpg"> 
<img src="images/sperm_whales. jpg"> 


</a> 


<div> 


<h3>Moby-Dick: A classic tale of the sea</h3> 


200r a new browser window. The exact behavior depends on the user's browser settings. 


90 


<a href="https://www.softcover.io/read/6070fb03/moby-dick" 
target="_blank"> 
<img src="images/moby_dick.png" alt="Moby Dick"> 

</a> 


<p> 
<a href="https://www.softcover.io/read/6070fb03/moby-dick" 
target="_blank"> 
<em>Moby-Dick</em></a> by Herman Melville 
begins with these immortal words: 
</p> 


<blockquote> 
<p> 
<span>Call me Ishmael.</span> Some years ago-never mind how long 
precisely-having little or no money in my purse, and nothing 
particular to interest me on shore, I thought I would sail about a 
little and see the watery part of the world. It is a way I have of 
driving off the spleen and regulating the circulation. 
</p> 
</blockquote> 


<p> 
After driving off his spleen (which <em>can't</em> be good for you), 
Ishmael then goes on in much the same vein for approximately one 
jillion pages. The only thing bigger than Moby Dick (who--<em>spoiler 
alert!</em>--is a giant white whale) is the book itself. 
</p> 
</div> 
</body> 
</html> 


In Listing 32, the header tag contains the h1 and h2 tags, and its impor- 
tance will become apparent only when we add inline styles in Section 4. For 
now, what's important is that it’s an abstract semantic tag used to label a part 
of the page, and has no immediate effect on the page”s appearance. 

Likewise, the div tag sets the page divisions apart, but won't have any 
effect until Section 4. We’ve also wrapped the iconic first line of Moby-Dick, 
“Call me Ishmael.”, in a span tag in anticipation of styling it in Section 4. (The 
main difference between the div and span tags is that div is a block element, 
whereas span is an inline element (Box 5).) Finally, we’ve introduced the 
blockquote tag for quoting blocks of text. 

In addition to illustrating the header, div, and span tags, Listing 32 also 
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shows an HTML comment, which appears as follows:7! 


<!-- much here to be styled, will do so in last section --> 


This line, which foreshadows the styling steps in Section 4, is ignored by the 
browser, and is not visible on the rendered page, as (not) seen in Figure 45.2 


eee < file:///Users/mhartl/repos/sample_website/moby_dick.html È ra 


A Softcover Book Report 
Moby-Dick (or, The Whale) 


The Softcover publishing platform was designed mainly for ebooks like the Ruby on Rails Tutorial book and Learn Enough HTML to Be Dangerous, but it's 
also good for making more traditional books, such as the novel Moby-Dick by Herman Melville (sometimes written as Moby Dick). We present below a short 


and affectionately irreverent book report on this classic of American literature. 


Moby-Dick: A classic tale of the sea 


Figure 45: The initial Softcover book report on Moby-Dick. 


21In Atom, you can toggle HTML comments using #/ (“Command-slash”), which (as noted in Learn Enough 
Text Editor to Be Dangerous) works for source code as well. Because the text editor infers the file type from the 
filename extension (or from the shebang line), we can use #/ to comment things out without having to remember 


the exact syntax for the file type we happen to be editing. 
2The comment is sent over the wire to the browser, though, and is visible to anyone inspecting the HTML 


source of our page. 
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3.3.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Validate the HTML in Listing 32 and confirm that there’s one warning 
and one error. Apply the fixes suggested by the validator and confirm 
that the new page validates with no warnings. 


2. Which of the changes in the previous exercises also affects the other two 
pages in our site? Update them accordingly. 


3. Add header, div, and span to the tables in tags. html. Hint: Like 
div, header is a block element. 


3.4 Lists 


As part of our mini-report on Moby-Dick, we'd like to include a couple of lists 
with some of our observations about the book. As we’ll see, HTML lists come 
in two basic types. 

The first list will highlight our top three favorite things about Moby-Dick. 
Because we want these to be in rank-order, we’ ll use the ordered list tag o1: 


<h4>0ur top 3 favorite things about Moby Dick</h4> 


<ol> 

<li>Vengeful whale</1li> 

<li>Salty sailors</li> 

<li>The names "Queequeg" and "Starbuck"</1i> 
</ol> 


Here the 1i tag indicates a list element, and the result will be numbered in 
sequence: 
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The second list will contain some other miscellaneous musings. Because 


the order isn’t important, we’ll use the unordered list tag ul, together with the 
same li list element tag used for ordered lists: 


<h4>Other things about Moby Dick</h4> 


<ul> 
<li> 
Chapter after chapter (after chapter) of meticulous detail about whaling 
</li> 
<li> 
The story pretty much 
<a href="https://en.wikipedia.org/wiki/Essex_(whaleship)" 


target="_blank">happened in real life</a> 
</li> 


<li>Mad sea captains are fun</li> 
</ul> 


As we’ ll see in a moment, unordered list elements are styled as bullet points by 
default: 


They are much more useful than this, though, and in practice unordered lists 
are used for significantly more than just making bullet points (as we’ll see in 
Learn Enough CSS & Layout to Be Dangerous). 


Putting these two lists together and adding them to the end of moby_- 
dick.html gives Listing 33. 


Listing 33: Adding lists to our Moby-Dick book report. 
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<h4>My top 3 favorite things about Moby Dick</h4> 


<ol> 

<li>Vengeful whale</1li> 

<li>Salty sailors</li> 

<li>The names "Queequeg" and "Starbuck"</1i> 
</ol> 


<h4>Other things about Moby Dick</h4> 


<ul> 
<li> 
Chapter after chapter (after chapter) of meticulous detail about whaling 
</li> 
<li> 
The story pretty much 
<a href="https://en.wikipedia.org/wiki/Essex_(whaleship)" 
target="_blank" >happened in real life</a> 
</li> 
<li>Mad sea captains are fun</li> 
</ul> 
</div> 
</body> 
</html> 


The result appears in Figure 46, which incidentally also shows the rendered 
blockquote that’s not quite visible in Figure 45. 
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(mi) 
a 


MOBY-DICK 


OR, THE WHALE 


Moby-Dick by Herman Melville begins with these immortal words: 


Call me Ishmael. Some years ago-never mind how long precisely—having little or no money in my purse, and nothing particular to interest me 
on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the 
circulation. 


After driving off his spleen (which can't be good for you), Ishmael then goes on in much the same vein for approximately one jillion pages. The only thing 
bigger than Moby Dick (who—spoiler alert! —is a giant white whale) is the book itself. 


My top 3 favorite things about Moby Dick 


ias ordered list 


2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 


Other things about Moby Dick 


- 
+ Chapter after chapter (after chapter) of meticulous detail about whaling u n O r d e re d | l st 


e The story pretty much happened in real life 
e Mad sea captains are fun 


Figure 46: Ordered and unordered lists. 


3.4.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Add 01, ul, and 1i tags to tags .html. Which are block elements are 
which are inline? 


96 


3.5 A navigation menu 


Before moving on to styling our book report page in Section 4, we’ll add a 
component common to most sites on the Web, yet one whose origins are mys- 
terious: a navigation menu with links to all the pages on the site (Box 6).2 
In the process, we’ll learn how to make links to pages on the current site in- 
stead of always linking to external websites. The navigation menu will also 
give us another chance to see how cumbersome it is to make websites without 
a templating system. 


Box 6. Hacked together with Perl 


Having watched the Web evolve from the start, 1 (Michael) knew how to make 
web pages from an early date, but I always wondered how it was that so many sites 
had the same menu on each page. I figured it must be some property of HTML I 
didn’t know about, but even an early book on web design didn’t cover it. 

I remember thinking, you don’t just hard-code the same menu on every page, 
do you? That's seems like an awful lot of duplicated effort. And what if you want 
to change it? 

It turns out that no, well-made sites don’t require you to hard-code the menu 
everywhere. In fact, as I realized much later, most such sites at the time were 
just hacked together with Perl (Figure 47), but at the time it was a genuine mys- 
tery. (Although Perl is still in use, nowadays it’s probably more common to stitch 
websites together using PHP, Python, JavaScript, or Ruby. The principle, though, 
remains the same.) 

In the present tutorial, we're not in a position to solve this problem the Right 
Way™, so we will have to write everything by hand. But this is a feature, not a 
bug, because solving the problem by hand helps us appreciate why it should be 
solved by a computer instead. 

We’ ll reveal the solution to this mystery, called a templating system, in Learn 
Enough CSS & Layout to Be Dangerous, and it’s covered thoroughly in the Ruby 
on Rails Tutorial as well. 


Copyright © Randall Munroe and used unaltered under the terms of the Creative Commons Attribution- 
NonCommercial 2.5 Generic license 
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Figure 47: Hacking most of it together with Perl. (“Lisp” via xkcd.) 


We’ll start by adding a div containing three links to the index page (List- 
ing 34). Note that we’ve adopted the common convention of referring to the 


index page as “Home”. 


Listing 34: Adding navigation links. 


index.html 


<!DOCTYPE html> 
<html> 


<head> 
<title>Learn Enough to Be Dangerous</title> 


<meta charset="utf-8"> 
</head> 
<body> 


<div> 
<a href="index.html">Home</a> 
<a href="moby_dick.html">Moby Dick</a> 
<a href="tags.html">HTML Tags</a> 


</div> 


<hl1l>The Learn Enough Story</h1> 


We see from Listing 34 that the way to link to a local page simply involves 
setting the href attribute equal to the path to the file, which works exactly the 


same way as an img tag’s src attribute (Section 2.4): 
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<a href="tags.html">HTML Tags</a> 


The result appears in Figure 48. 


eee < file:///Users/mhartl/repos/sample_website/index.html © 


The Learn Enough Story 


Learn Enough to Be Dangerous is a leader in the movement to teach technical sophistication, the seemingly magical ability to take command of your 
computer and get it to do your bidding. This includes everything from command lines and coding to guessing keyboard shortcuts, Googling error messages, 
and knowing when to just reboot the darn thing. We believe there are at least a billion people who can benefit from learning technical sophistication, 
probably more. To join our movement, sign up for our official email list now. 


HTML was created by the original "web developer", computer scientist Tim Berners-Lee. It's not true that Sir Tim invented HTML in order to share pictures 
of his cat, but it would be cool if it were. 


Figure 48: The navigation menu on the index page. 


We can add the same menu to the HTML tags page with the markup in 
Listing 35. The result appears in Figure 49. 


Listing 35: Adding the navigation menu to the HTML tags page. 
tags.html 


<!DOCTYPE html> 
<html> 
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<head> 
<title>HTML Tags</title> 
<meta charset="utf-8"> 
</head> 
<body> 


<div> 
<a href="index.html">Home</a> 
<a href="moby_dick.html">Moby Dick</a> 
<a href="tags.html">HTML Tags</a> 
</div> 


<h1>Important HTML tags</h1> 


Adding the menu to the page on Moby Dick is left as an exercise. 
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Home Moby Dick HTML Tags 


Important HTML tags 


This page is designed as a quick reference for some of the common tags covered in Learn Enough HTML to Be Dangerous. In the process of making it, we'll 
learn how to make HTML tables via table and related tags. 


The tables below don't include all HTML tags, but they do list many of the most important ones. 


Block Elements 


Tag Name 
hi—hé headings include a heading (levels 1-6) 
p paragraph include a paragraph of text 
table table include a table 
tr tablerow include a row of data 
th table header make a table header 
td table data include a table data cell 


Inline Elements 
Tag Name Purpose Example Result 


em emphasized make emphasized text <em>technical sophistication</em> technical sophistication 


Figure 49: The navigation menu on the HTML tags page. 


By the way, you may have noticed that it would probably be more natural 
to order the navigation in order of the pages’ introduction, 1.e., Home, Tags, 
Moby Dick. Changing this order is also left as an exercise, mainly so that you 
feel the pain of making the same change on three different pages—a pain that 
is alleviated by the templating systems covered in Learn Enough CSS & Layout 
to Be Dangerous. 


3.5.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


101 


1. Add the menu links to the Home page. 


2. In the menu links, change the order of the links so that the tags page 
comes second. How many files do you have to edit? 


4 Inline styling 


Now that we’ve added the content for our pages and blocked out the basic 
structure, we’re ready to add some styling. Our basic approach involves adding 
inline styles, which means putting styling commands directly inside the site’s 
HTML tags. This approach will allow us to understand exactly what our styling 
is doing on a per-element basis, giving us immediate results without the over- 
head of adding Cascading Style Sheets. Moreover, inline and CSS styling com- 
mands are essentially the same, so everything we cover here is applicable to the 
industrial-grade styling covered in Learn Enough CSS & Layout to Be Danger- 
ous (Box 7). 


Box 7. Separating style and content 


If adding styles directly to elements gives you the results that you want, why 
is it considered bad practice to do it? 

One reason is that when your styling is kept in a separate file from your content 
and layout, the HTML files are cleaner and easier to maintain. This doesn’t make 
a huge difference when one developer is working on a single page, but when you 
have multiple developers all making changes to multiple pages, it quickly becomes 
a nightmare to make changes efficiently and consistently. Imagine if you decided 
that you didn’t like the size of a font on your site, and had to go around to every 
place on every page that needed a new style. If this were the only way, no one 
would ever do it. 

Another reason for separating style from content is that it allows for much 
greater flexibility and efficiency when applying style rules to multiple elements. 
Instead of having to style each individual tag, we can apply styling to all elements 
on the entire site, or just to certain elements that we choose. 


102 


For instance, it’s possible to make a table span the full width of the page using 
the rule width: 100%. If we wanted every table on the site to have the same 
styling, we would have to copy and paste that into every <table> tag on every 


page: 


<table style="width: 100%; "> 
<table style="width: 100%; "> 
<table style="width: 100%;"> 


With CSS, we can tell the browser to style every table with a small bit of code. 


table { 
Wilden: LOO% 
} 


This represents a massive gain in simplicity and efficiency. 

Finally, every page on the Internet is sitting on a remote server somewhere 
sending data to the users visiting the site. Every word or line of code that you 
add to a page is something extra that needs to be downloaded over the network. 
Cutting out repetitive elements on a page makes them smaller, and thus helps sites 
load faster as well. 


4.1 Text styling 


As mentioned in Section 3.3, our design efforts will focus on the Moby-Dick 
book report page, which stands to gain the most from changing the default 
HTML styling. We’ll begin by adding a little styling to the quote of the first 
paragraph from Moby-Dick. Recall from Listing 32 that the quote uses the 
blockquote tag, which is set apart from the surrounding text by extra space 
and indentation (Figure 50). 
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MOBY-DICK 


OR, THE WHALE 


Moby-Dick by Herman Melville begins with these immortal words: 


Call me Ishmael. Some years ago-never mind how long precisely—having little or no money in my purse, and nothing particular to interest me 


on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the 
circulation. 


After driving off his spleen (which can't be good for you), Ishmael then goes on in much the same vein for approximately one jillion pages. The only thing 
bigger than Moby Dick (who—spoiler alert! —is a giant white whale) is the book itself. 


My top 3 favorite things about Moby Dick 
1. Vengeful whale 
2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 
Other things about Moby Dick 


+ Chapter after chapter (after chapter) of meticulous detail about whaling 
e The story pretty much happened in real life 


Figure 50: The default blockquote styling. 


To make the quote stand out even more, let’s change the font style to italics 
while increasing the font size to 20 pixels (20px). The way to do this is with 
the style attribute, which can be added to virtually any HTML tag. In this 
case, we'll change the font-style and the font-size as follows: 


<blockquote style="font-style: italic; font-size: 20px; "> 


Note that the styling rules after style= is a single string of characters, with 
each individual style separated from the others by a semicolon ;. (The final 
semicolon isn’t technically necessary, but including it is a good practice since 


it lets us add additional styles later on without having to remember to add a 
semicolon.) 
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Taking this idea and editing moby_dick.html leads to the HTML shown 
in Listing 36. The result appears in Figure 51. 


Listing 36: Styling the blockquote. 
moby aleck. NEm 


<blockquote style="font-style: italic; font-size: 20px;"> 


</blockquote> 
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MOBY-DICK 


OR, THE WHALE 


Moby-Dick by Herman Melville begins with these immortal words: 


After driving off his spleen (which can't be good for you), Ishmael then goes on in much the same vein for approximately one jillion pages. The only thing 
bigger than Moby Dick (who—spoiler alert!—is a giant white whale) is the book itself. 


My top 3 favorite things about Moby Dick 


1. Vengeful whale 
2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 


Other things about Moby Dick 


+ Chapter after chapter (after chapter) of meticulous detail about whaling 


Figure 51: A styled blockquote. 


Next, we’ll add some styling to the famous first line “Call me Ishmael.” 
We’ ll first revert the font style back to normal (which is how you emphasize 
text when the surrounding text is already in italics). Then we’ll make the font 
even bigger that the 20px used for the rest of the quote, while also making it 
bold. Finally, we’ll change the color to an attention-grabbing red. 

Ordinarily, there would be no way to style just the line “Call me Ishmael.” 
If we had written it as 


Call me Ishmael. Some years ago... 


at this point we’d be out of luck. Recall from Listing 32, though, that the 
opening line is wrapped in a span tag: 
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<span>Call me Ishmael.</span> Some years ago... 


The reason for this is that we correctly anticipated wanting to style it later on. 
(In practice we can’t always anticipate such things, but of course we can wrap 


the relevant text in a span tag as needed.) 
Although the span tag doesn’t really do anything by itself, we can add 


styles to it, as follows: 


<span style="font-style: normal; font-size: 24px; font-weight: bold; 
color: #££0000;">Call me Ishmael.</span> 


Here we’ve combined font-style, font-size, font-weight, and color 
to obtain the results outlined above. These are but a few of the many style prop- 
erties available, which you can learn about at sites like w3schools. Meanwhile, 
the color ££0000 is a hexadecimal code for red, as discussed in Box 8. 


Box 8. HTML and hexadecimal color 


HTML colors are typically indicated using a system known as hexadecimal 
RGB (for “red, green, blue”), which gives us a flexible way to specify colors with 


fine-grained precision. 
Hexadecimal refers to the use of base 16, which uses 16 symbols from 0 to F 


to specify the decimal numbers 0 through 15: 


O 2 ES RO ooo LO O AA Say Pets 
OO ese E [eto ge ESA LO DATES TE 
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Just as base 10 lets us count from 0 to 10? — 1 = 99 using only two digits, 
hexadecimal lets us count from 0 to 16? — 1 = 255 using 00 = 0 up to FF = 255. 

A computer monitor displays colors by combining red, green, and blue pixels 
together, which represent the three additive primary colors. If all three colors are 
turned on, which would look like #FFFFFF, the screen will look white. Con- 
versely, if all three colors are turned off, which is #000000, the screen will look 
black. Intermediate combinations of the three colors combine to produce virtually 
all the colors you can see: 


#FF0000 #00FF00 #0000FF #FFCC17 


For convenience, HTML also supports a shorthand that can stand in for the 
full hex string in some cases. For example, if the numbers are repeated, as in 
#222222, #bbbbbb, or #aa22ff, you can shorten the whole number to just 
three digits, like this: #222, #bbb, or #a2f. (Note that we’ve switched to lower- 
case letters, which is more common in modern HTML code, but is exactly equiv- 
alent the upper-case versions shown above.) When the browser sees only three 
digits, it fills in the missing ones automatically. 

The hexadecimal color system might seem confusing at first, but you’ll find 
that you quickly come to understand how the three values work together to make 
different colors (and different shades of those colors). To learn more, we suggest 
playing around with the color picker at w3schools.com to see what kinds of colors 
you can make. 


Including the styles above in moby_dick.html gives us the code in List- 
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ing 37, with the result shown in Figure 52. 


Listing 37: Adding style to the opening span. 
MOD Cli Gi o Ica 


<blockquote style="font-style: italic; font-size: 20px;"> 
<p> 
<span style="font-style: normal; font-size: 24px; font-weight: bold; 
color: #££0000;">Call me Ishmael.</span> 
Some years ago-never mind how long precisely-having little or 
no money in my purse, and nothing particular to interest me on shore, 
I thought I would sail about a little and see the watery part of the 
world. It is a way I have of driving off the spleen and regulating the 
circulation. 
</p> 
</blockquote> 
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MOBY-DICK 


OR, THE WHALE 


Moby-Dick by Herman Melville begins with these immortal words: 


Call me Ishmael. Some years ago-never mind how long precisely-having little or no money in my purse, and 
nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. 
It is a way I have of driving off the spleen and regulating the circulation. 


After driving off his spleen (which can't be good for you), Ishmael then goes on in much the same vein for approximately one jillion pages. The only thing 
bigger than Moby Dick (who—spoiler alert! —is a giant white whale) is the book itself. 


My top 3 favorite things about Moby Dick 


1. Vengeful whale 
2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 


Other things about Moby Dick 


e Chapter after chapter (after chapter) of meticulous detail about whaling 


Figure 52: Making the opening line really pop. 


As a final change, we’ll align the text of the book report headers so that it’s 
centered in the page. The way to do this is with the text-align property, 
as shown in Listing 38. (Note that Listing 38 also removes the comment from 
Listing 32 since it’s now obsolete.) 


Listing 38: Centering the headings. 
MOD Clit GJ o cial 


<header> 
<h1 style="text-align: center;">A Softcover Book Report</h1> 
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<h2 style="text-align: center;">Moby-Dick (or, The Whale) </h2> 
</header> 


The result appears in Figure 53. 


B 
a 
E 
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Home HTML Tags Moby Dick 


A Softcover Book Report 


Moby-Dick (or, The Whale) 


The Softcover publishing platform was designed mainly for ebooks like the Ruby on Rails Tutorial book and Learn Enough HTML to Be Dangerous, but it's 
also good for making more traditional books, such as the novel Moby-Dick by Herman Melville (sometimes written as Moby Dick). We present below a short 


and affectionately irreverent book report on this classic of American literature. 


Moby-Dick: A classic tale of the sea 


Figure 53: Centered headings. 


4.1.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people's answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 
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1. Verify that color: red; has the same effect as color: #££0000;. 
What are the advantages of each approach? 


2. What would you guess the color of #cccccc is? Temporarily modify the 
color of the span in Listing 37 to check your guess. How does it differ 
from aca? 


4.2 Floats 


Now that we’ve learned how to move text around, let's look at how to adjust 
how other elements on the page can be moved. We’ll start by shrinking the 
size of the cover image down a little, and then we’ll arrange for the text to flow 
around it as if it were part of the paragraphs and blockquote. 

We’ll start by using the height attribute to the img tag to restrict the height 
to 200 pixels: 


<img src="images/moby_dick.png" alt="Moby Dick" height="200px"> 


Several caveats are in order here. First, although inline resizing is still fairly 
common, using CSS is the best practice. Second, resizing the image this way 
(whether inline or with CSS) affects only the image display, and the entire im- 
age still needs to be downloaded from the web server, so this technique should 
be used only for fairly minor resizings.?* (If you’ve ever visited a web page 
where a seemingly tiny image takes forever to download, this is probably the 
reason why.) Finally, if you go this route you should use either height or 
width, but not both, as the combination forces the browser to attempt to respect 
both numbers, which can result in weird image resizing effects (Figure 54). 


241f you need to resize the image itself and don’t have access to Photoshop, you can use the free Skitch utility 
for resizing, cropping, and simple annotation. 
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Figure 54: Bad image resizing is bad. 


In order to get the text to flow around the image, we need to use a style 
technique called floating. The idea is that when you set an element to “float” 
to the left or right (there is no center), all the inline content around it will flow 
around the floated element. To see this in action, all we need to do is add 
style="float: left;" to the image attributes: 


<img src="images/moby_dick.png" alt="Moby Dick" height="200px" 
style="float: left;"> 


Inserting this into the book report page gives Listing 39, with the result shown 
in Figure 55. 


Listing 39: Resizing and floating an image. 
MMO _CLLCIS e JaME 


<h3>Moby-Dick: A classic tale of the sea</h3> 


<a href="https://www.softcover.io/read/6070fb03/moby-dick" 
target="_blank"> 
<img src="images/moby_dick.png" alt="Moby Dick" height="200px" 
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style="float: left; "> 
</a> 


In Figure 55, the image is effectively treated like text, with the normal text now 
flowing up and to its side. We’ll see in Section 4.5 that the float attribute also 
arranges for the text to flow past the image as well. 


@oe@ |< > file:///Users/mhartl/repos/sample_website/moby_dick.html| © Â o | 


Moby-Dick: A classic tale of the sea 


'oby-Dick by Herman Melville begins with these immortal words: 


= all me Ishmael. Some years ago-never mind how long precisely-having little or no money in my 
Bt a purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the 
atery part of the world. It is a way I have of driving off the spleen and regulating the circulation. 


No a Alter driving off his spleen (which can't be good for you), Ishmael then goes on in much the same vein for approximately one jillion 
pages. The only thing bigger than Moby Dick (who—spoiler alert!—is a giant white whale) is the book itself. 


ly top 3 favorite things about Moby Dick 


1. Vengeful whale 
2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 


Other things about Moby Dick 


+ Chapter after chapter (after chapter) of meticulous detail about whaling 
+ The story pretty much happened in real life 
e Mad sea captains are fun 


Figure 55: A nicely resized & floated image. 
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4.2.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. What happens if you change float: left to float: right in 
Listing 39? 


4.3 Applying a margin 


Even though we’ve floated the image, the page still looks a little weird, with 
the text smashed up against the book cover. To make it look better, we’ ll add a 
margin of empty space to the right of the image. 

Margins are one of three styles that can be applied to the imaginary boxes 
that contain HTML content, the others being padding (empty space inside the 
box) and borders (a line around the box). We’ll talk more about these styles 
in the context of the box model covered in Learn Enough CSS & Layout to Be 
Dangerous, but we can accomplish our immediate goal by applying a margin 
using inline styling. (We’ll see an example of padding in Section 4.5.) 

We’ll start with the simplest kind of margin declaration, which looks like 
margin: 40px;: 


<img src="images/moby_dick.png" alt="Moby Dick" height="200px" 
style="float: left; margin: 40px; "> 


If we add this to the img tag (Listing 40), everything surrounding the image 
moves 40 pixels in each direction, as shown in Figure 56. 


Listing 40: Adding an image margin. 
moby_dick.html 


<h3>Moby-Dick: A classic tale of the sea</h3> 
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<a href="https://www.softcover.io/read/6070fb03/moby-dick" 
target="_blank"> 
<img src="images/moby_dick.png" alt="Moby Dick" height="200px" 
style="float: left; margin: 40px;"> 

</a> 


B 
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Moby-Dick: A classic tale of the sea 


Moby-Dick by Herman Melville begins with these immortal words: 


Call me Ishmael. Some years ago-never mind how long precisely-having little or no 
money in my purse, and nothing particular to interest me on shore, I thought I would sail 
about a little and see the watery part of the world. It is a way I have of driving off the spleen 
D and regulating the circulation. 

MOBY-DICK 


¡After driving off his spleen (which can't be good for you), Ishmael then goes on in much the same vein for approximately 
¡one jillion pages. The only thing bigger than Moby Dick (who—spoiler alert!—is a giant white whale) is the book itself. 


My top 3 favorite things about Moby Dick 
1. Vengeful whale 
2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 
Other things about Moby Dick 


+ Chapter after chapter (after chapter) of meticulous detail about whaling 
+ The story pretty much happened in real life 


KAN 


Figure 56: Close, but not quite! 


Figure 56 shows that we’ve gotten closer to our goal by putting some space 
between the text and the image, but styling still isn’t quite what we want. The 
reason is that writing margin: 40px; applies the margin in all directions, 
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but we really only want the margin on the right side of the image, to separate it 
from the text. 

The most general way to control where the margin goes is to give the 
margin attribute four values, corresponding to the top, right, bottom, and left 
of the box (Figure 57). 


margin: 40px 30px 40px 30px 


margin: 40px 30px 


Figure 57: Think of the four values as going clockwise from the top. 


For example, to get margins of 40, 30, 20, and 10 pixels going around an 
image (clockwise from the top), we could use this style attribute: 


<img src="..." style="margin: 40px 30px 20px 10px; "> 


In the present case, we want only a right margin, so we can set the other three 
sides to Opx (or just O for short):”° 


25We could use the attribute style="margin-right: 40px;" to achieve the same effect, but specifying 
all four margins is the dominant convention and so is worth learning. 
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<img src="images/moby_dick.png" alt="Moby Dick" height="200px" 
style="float: left; margin: 0 40px 0 0;"> 


Applying this to the full source of the book report page gives Listing 41. 


Listing 41: Adding only a right margin. 
moby_dick.html 


<h3>Moby-Dick: A classic tale of the sea</h3> 


<a href="https://www.softcover.io/read/6070fb03/moby-dick" 
target="_blank"> 
<img src="images/moby dick.png" alt="Moby Dick" height="200px" 
style="float: left; margin: 0 40px 0 0;"> 

</a> 


The result of Listing 41 shows exactly the result we want, with a margin applied 
only on the right. 
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Moby-Dick: A classic tale of the sea 


Moby-Dick by Herman Melville begins with these immortal words: 


Call me Ishmael. Some years ago-never mind how long precisely—having little or no money in 
Lt Pa my purse, and nothing particular to interest me on shore, I thought I would sail about a little and 

ee the watery part of the world. It is a way I have of driving off the spleen and regulating the 
circulation. 

MOBY-DICK 

After driving off his spleen (which can't be good for you), Ishmael then goes on in much the same vein for approximately one 
jillion pages. The only thing bigger than Moby Dick (who—spoiler alert! —is a giant white whale) is the book itself. 


My top 3 favorite things about Moby Dick 
1. Vengeful whale 
2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 
Other things about Moby Dick 


+ Chapter after chapter (after chapter) of meticulous detail about whaling 
+ The story pretty much happened in real life 


Figure 58: Much better! 


4.3.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. How does the margin in Listing 41 change if we replace the margin with 
margin-right: 40px? 


2. Add the style rule padding: 10px; to the td elements for the first 
two block elements elements in the table in tags .htm1. How annoying 
would it be to add them to every td? How annoying is changing from 
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10px to 20px everywhere? (This is one reason why in real life you 
always use CSS.) 


4.4 More margin tricks 


There are a couple of more margin tricks worth mentioning, both of which we 
can immediately put to good use. First, in addition to the shorthand margin: 
40px (with only one value), it’s possible to include only two values: 


margin: 20px 40px; 


As illustrated in Figure 57, this syntax sets the top and bottom margins to 20px 
and the left and right margins to 40px, so it is equivalent to 


margin: 20px 40px 20px 40px; 


This shorthand also works with just three values, like this: margin: 20px 
10px 40px;. This is missing the last value, which (as seen in Figure 57) is 
the left margin. In this case, it will be filled in automatically from its opposite 
across the box (in this case, 10px). 

We can apply this to the header for the book report page by adding a bottom 
margin via margin: 0 0 80pxas shown in Listing 42. 


Listing 42: Centering the book report headers. 
moby_dick.html 


<header style="text-align: center; margin: 0 0 80px;"> 
<h1>A Softcover Book Report</h1> 
<h2>Moby-Dick (or, The Whale) </h2> 

</header> 
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Note that we’ve also taken this opportunity to hoist the style text-align: 
center into the header tag. The result appears in Figure 59. 


0020 < > file:///Users/mhartl/repos/sample_website/moby_dick.html © 4 a [+ 


Home HTML Tags Moby Dick 


A Softcover Book Report 
Moby-Dick (or, The Whale) 


extra margin 


The Softcover publishing platform was designed mainly for ebooks like the Ruby on Rails Tutorial book and Learn Enough™ HTML to Be Dangerous, but 
it's also good for making more traditional books, such as the novel Moby-Dick by Herman Melville (sometimes written as Moby Dick). We present below a 
short and affectionately irreverent book report on this classic of American literature. 


Moby-Dick: A classic tale of the sea 


Figure 59: Adding a margin under the header. 


The second margin trick is the use of margin: auto;, which inserts a 
margin with a size that is automatically the same on all sides. Its most common 


application is probably in the rule 


margin: 0 auto; 


which arranges for no top or bottom margin and automatic margins on the 
left and right. The result of equal left and right margins is that the element 
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is centered, which is especially useful for elements like images that can’t be 
centered using the text-align: center; rule we saw in Listing 38. 

One restriction of margin: 0 auto is that it works only on block ele- 
ments, but recall from Box 5 that the img tag is an inline element. We can fix 
this with the style display: block;, which overrides the default. Putting 
this together with the margin rule leads to Listing 43, with the result shown in 
Figure 60. 


Listing 43: A centered image. 
moby_dick.html 


<a href="https://commons.wikimedia.org/wiki/File:Sperm_whale_pod. jpg"> 
<img src="images/sperm_whales. jpg" 
style="display: block; margin: 0 auto;"> 

</a> 
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Home Moby Dick HTML Tags 


A Softcover Book Report 
Moby-Dick (or, The Whale) 


The Softcover publishing platform was designed mainly for ebooks like the Ruby on Rails Tutorial book and Learn Enough HTML to Be Dangerous, but it's 
also good for making more traditional books, such as the novel Moby-Dick by Herman Melville (sometimes written as Moby Dick). We present below a short 
and affectionately irreverent book report on this classic of American literature. 


Moby-Dick: A classic tale of the sea 


Moby-Dick by Herman Melville begins with these immortal words: 


Figure 60: A centered image. 


4.4.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people’s answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. What happens if you use margin: 0 auto for the book cover im- 


age (together with display: block) without changing the float rule? 
What does this tell you about the precedence of the two rules? 
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4.5 Box styling 


So far, the changes we’ve made have had a relatively minor impact on the 
appearance of the book report page. In this section, we’ll see how a set of only 
four style rules can make a surprisingly big difference. 

Recall from Listing 32 that we wrapped the bulk of the report in a div 
tag, which defines a block element that doesn’t get any default styling from the 
browser, thereby making it perfect to use as a wrapper for styling other content. 
In this case, we’ll use the width style to restrict the size of the main report to 
500 pixels, and it turns out this lets us use the automatic margin trick from 
Section 4.4 to center it using margin: 20px auto (thereby also putting a 
20 pixel margin on the top and bottom). Finally, we’ll combine a padding 
rule with a change in the background-color using the hexadecimal color 
convention covered in Box 8. The resulting style rules appear in Listing 44. 


Listing 44: Adding styling to the book report box. 
moby_dick.html 


<div style="width: 500px; margin: 20px auto; padding: 30px; 
background-color: #fafafa;"> 


<h3>Moby-Dick: A classic tale of the sea</h3> 


Comparing the before (Figure 61) and after (Figure 62) shows what a difference 
a few style rules can make. 
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Moby-Dick: A classic tale of the sea 


Moby-Dick by Herman Melville begins with these immortal words: 


Call me Ishmael. Some years ago-never mind how long precisely—having little or no money in 
e my purse, and nothing particular to interest me on shore, I thought I would sail about a little and 
see the watery part of the world. It is a way I have of driving off the spleen and regulating the 
circulation. 


MOBY-DICK 


After driving off his spleen (which can't be good for you), Ishmael then goes on in much the same vein for approximately one 
jillion pages. The only thing bigger than Moby Dick (who— spoiler alert!—is a giant white whale) is the book itself. 


My top 3 favorite things about Moby Dick 


1. Vengeful whale 
2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 


Other things about Moby Dick 


+ Chapter after chapter (after chapter) of meticulous detail about whaling 
+ The story pretty much happened in real life 
Mad sea captains are fun 


Figure 61: The report box before adding styling. 
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Moby-Dick: A classic tale of the sea 


Moby-Dick by Herman Melville begins with these 
immortal words: 


Call me Ishmael. Some years 
ago-never mind how long 
precisely-having little or no money 
MOBY-DICK in my purse, and nothing particular 
: to interest me on shore, I thought I 
would sail about a little and see the 
watery part of the world. It is a 
way I have of driving off the spleen and regulating 
the circulation. 


After driving off his spleen (which can't be good for you), Ishmael then goes 
on in much the same vein for approximately one jillion pages. The only thing 
bigger than Moby Dick (who—spoiler alert! —is a giant white whale) is the 
book itself. 


My top 3 favorite things about Moby Dick 


1. Vengeful whale 
2. Salty sailors 
3. The names "Queequeg" and "Starbuck" 


Other things about Moby Dick 


e Chapter after chapter (after chapter) of meticulous detail about whaling 
e The story pretty much happened in real life 
e Mad sea captains are fun 


Figure 62: The report box after adding styling. 


As we see in Figure 62, the report content has now been set apart from the 
rest of the page in a styled box. 

To recap what happened, we set a width for the box, and because of this we 
were able to set the left and right margins to auto. Then we added padding 
to the box, which pushed the content inside away from the edges. (Investi- 
gating the difference between padding and margins is left as an exercise (Sec- 
tion 4.5.1).) We also added a light gray background color with the hexadecimal 
code #fafafa (Box 8). (Don’t worry about trying to visualize the color cor- 
responding to a hex code; that’s what color pickers are for.) Finally, because 
of the narrower width, the text of the Moby-Dick quote now flows around the 
floated cover image, thereby fulfilling the promise made at the end of Sec- 


126 


tion 4.2. 


4.5.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people's answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Temporarily change padding to margin in Listing 44. What difference 
does this make in the appearance? 


2. Add and style a blockquote with padding and background color as shown 
in Listing 45. Fill in TAG with the right level tag for that location in the 
document, and replace FILL_ IN with a reasonable color of your choice. 
The result for one color choice appears in Figure 63. 


Listing 45: Styling a famous quotation. 
index.html 


<hl1>The Learn Enough Story</h1> 


<img src="images/kitten.jpg" alt="An adorable kitten"> 
<TAG>Quotations</TAG> 


<p> 
In addition to hosting most of the world's supply of kitten videos, the 
Web is also full of inspiring quotes, perhaps none more so than this one: 
</p> 
<p> 
<blockquote style="padding: 2px 20px; background: #FILL_IN; "> 
<p> 
<em>Don't believe every quote you read on the Internet.</em> 
<br> 
--Abraham Lincoln 
</p> 
</blockquote> 
</p> 
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<h2>Founders</h2> 


ex... < 


$$$ 
file:///Users/mhartl/repos/sample_website/index.htm| 


Quotations 


In addition to hosting most of the world's supply of kitten videos, the Web is also full of inspiring quotes, perhaps none more so than this one: 


Don't believe every quote you read on the Internet. 
— Abraham Lincoln 


Background 


Learn Enough to Be Dangerous is an outgrowth of the Ruby on Rails Tutorial and the Softcover publishing platform. This page is part of the sample site for 
Learn Enough HTML to Be Dangerous, which teaches the basics of HyperText Markup Language, the universal language of the World Wide Web. Other 
related tutorials can be found at learnenough.com. 


Founders 


Learn Enough to Be Dangerous was founded in 2015 by Michael Hartl, Lee Donahoe, and Nick Merwin. We believe that the kind of technical sophistication 
taught by the Learn Enough tutorials can benefit at least a billion people, and probably more. 


Michael Hartl 


> 


Figure 63: Styling a famous quote from an American president. 


4.6 Navigation styling 


As a final change to our sample website, we’ll make a change across all three 
pages by adding styling to the navigation menu added in Section 3.5. In the 
process, we’ll yet again feel the pain of having to make the same change in 
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several places, further preparing us to appreciate the value of the template sys- 
tem developed in Learn Enough CSS & Layout to Be Dangerous. 

To style the nav menu, we’ ll first move it from the top left of the page to the 
more conventional top right. This will involve adding a style rule to the div 
tag that wraps the whole menu (Listing 34). At the same time, we’ll add a left 
margin to the second and third nav link in order to improve the spacing. The 
changes to the book report page appear in Listing 46, and the result appears in 
Figure 64. 


Listing 46: Styling the navigation menu on the book report page. 
moby_dick.html 


<div style="text-align: right;"> 

<a href="index.html">Home</a> 

<a href="tags.html" style="margin: 0 0 0 10px;">HTML Tags</a> 

<a href="moby_dick.html" style="margin: 0 0 0 10px;">Moby Dick</a> 
</div> 
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Home HTML Tags Moby Dick 


A Softcover Book Report 
Moby-Dick (or, The Whale) 


The Softcover publishing platform was designed mainly for ebooks like the Ruby on Rails Tutorial book and Learn Enough HTML to Be Dangerous, but it's 
also good for making more traditional books, such as the novel Moby-Dick by Herman Melville (sometimes written as Moby Dick). We present below a short 


and affectionately irreverent book report on this classic of American literature. 


Moby-Dick: A classic tale of the sea 


Figure 64: The styled navigation on the book report page. 


Of course, we're not done yet, as we need to make the same edits to the nav 
menu on the Home page (Listing 47) and HTML tags page (Listing 48). 


Listing 47: Styling the navigation menu on the Home page. 


index.html 


<div style="text-align: right;"> 
<a href="index.html">Home</a> 
<a href="tags.html" style="margin: 0 0 0 10px;">HTML Tags</a> 
<a href="moby_dick.html" style="margin: 0 0 0 10px;">Moby Dick</a> 


</div> 
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Listing 48: Styling the navigation menu on the HTML tags page. 
tags.html 


<div style="text-align: right; "> 

<a href="index.html">Home</a> 

<a href="tags.html" style="margin: 0 0 0 10px;">HTML Tags</a> 

<a href="moby_dick.html" style="margin: 0 0 0 10px;">Moby Dick</a> 
</div> 


The results on the nav menu are exactly the same as shown in Figure 64. 
This is not surprising given that the changes represented by Listing 46, List- 
ing 47, and Listing 48 are all identical. This sort of repetition is cumbersome 
and error-prone—definitely a Bad Thing. As mentioned several times before, 
we'll solve this problem with a templating system in Learn Enough CSS & 
Layout to Be Dangerous. 


4.6.1 Exercises 


Solutions to exercises are available for free at learnenough.com/solutions with 
any Learn Enough purchase. To see other people's answers and to record your 
own, join the Learn Enough Society at learnenough.com/society. 


1. Change margin: 0 0 O 10px; to margin-left: 10px in List- 
ing 48. What if anything changes in the appearance? 


2. It’s conventional for navigation links not to change color after being fol- 
lowed, and they also look better if they’re not underlined like normal 
links. Using your Google-fu and the w3schools reference, guess the style 
rules for making these changes, and apply them to each element in the 
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menu. Hint: The property you’ll have to modify to remove underlining 
is text-decoration. The result should look something like Figure 65. 


3. Add a new table for the “document tags” that define the properties of the 
document. Include html, head, body, and meta. 


4. Add any missing tags to tags .html. (By my count there two.) 


eee < file:///Users/mhartl/repos/sample_website/index.html © ra] a +] 


Home HTML Tags Moby Dick 


The Learn Enough Story 


Learn Enough to Be Dangerous is a leader in the movement to teach technical sophistication, the seemingly magical ability to take command of your 
computer and get it to do your bidding. This includes everything from command lines and coding to guessing keyboard shortcuts, Googling error messages, 
and knowing when to just reboot the darn thing. We believe there are at least a billion people who can benefit from learning technical sophistication, 
probably more. To join our movement, sign up for our official email list now. 


“You should follow Learn Enough on Twitter here. 


HTML was created by the original "web developer", computer scientist Tim Berners-Lee. It's not true that Sir Tim invented HTML in order to share pictures 
of his cat, but it would be cool if it were. 


Figure 65: Styling the menu links. 
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5 Conclusion 


Congratulations! You know know enough HTML to be dangerous. All that’s 
left is to commit and deploy the final sample website: 


$ git commit -am "Finish the sample website" 
$ git push 


The result is a full website running in a production environment (Figure 66). 
For reference, summary tables of all the block-level tags and inline tags appear 
in Table 2 and Table 3, respectively. 
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The Softcover publishing platform was designed mainly for ebooks like the Ruby on Rails Tutorial book and Learn Enough HTML to Be Dangerous, but it's 
also good for making more traditional books, such as the novel Moby-Dick by Herman Melville (sometimes written as Moby Dick). We present below a short 
and affectionately irreverent book report on this classic of American literature. 


Moby-Dick: A classic tale of the sea 


Moby-Dick by Herman Melville begins with these 
immortal words: 


F a, Call me Ishmael. Some years 
n ago-never mind how long 

precisely—having little or no money 
MOBY-DICK in my purse, and nothing particular 
to interest me on shore, I thought I 


Figure 66: A production website. 
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Tag 


em 


table 
tr 

th 

td 

div 
header 
Gl 


li 
blockquote 
DY 


Table 2: 


Name 


emphasized 


strong strong 


img 


code 


span 


anchor 


image 


code 


span 


Name 
headings 
paragraph 
table 

table row 
table header 
table data 
division 
header 
ordered list 
unordered list 
list item 
block quotation 
break 


Purpose 

include a heading (levels 1—6) 

include a paragraph of text 

include a table 

include a row of data 

make a table header 

include a table data cell 

define block-level section in document 
label the page header 

list elements in numerical order 

list elements whose order doesn’t matter 
include a list item (ordered or unordered) 
show formatted quotation 

enter line break 


The block-level tags covered in this tutorial. 


Purpose Example Result 
make emphasized <em>technical technical sophis- 
text sophistication</em> tication 
<strong>at 
least a at least a billion 
make strong text EE Seed 
billion people 
people</strong> 
<a 
; href=" # "> 
make hyperlink keari Learn Enough 
Enough</a> 


include an image 


format as source 


code 


define inline sec- 
tion in document 


<img 
src="mhartl.jpg" 
alt="Michael 


Hartl"> 

<code>table</code> table 
<span>Call 

me Call me Ishmael. 


Ishmael .</span> 


Table 3: The inline tags covered in this tutorial. 
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At this point, you’ve got a solid foundation in the basics of HTML. To learn 
how to make industrial-strength websites, though, you’ll need to take the one 
additional step of reading Learn Enough CSS & Layout to Be Dangerous. And 
if you really want to take things as far as they can go, we recommend the full 
Learn Enough sequence: 


1. Developer Fundamentals 


(a) Learn Enough Command Line to Be Dangerous 
(b) Learn Enough Text Editor to Be Dangerous 
(c) Learn Enough Git to Be Dangerous 


2. Web Basics 


(a) Learn Enough HTML to Be Dangerous (you are here) 
(b) Learn Enough CSS & Layout to Be Dangerous 
(c) Learn Enough JavaScript to Be Dangerous 


3. Intro Ruby Web Development 


(a) Learn Enough Ruby to Be Dangerous 
(b) Learn Enough Sinatra to Be Dangerous 


(c) Learn Enough Ruby on Rails to Be Dangerous 
4. Professional Ruby Web Development 
e The Ruby on Rails Tutorial 


Good luck! 


Learn Enough HTML to Be Dangerous. Copyright © 2016 by Michael Hartl and Lee Donahoe. 
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